Buttons and Links

Interactive elements that communicate actions clearly. Designed to enhance user experience across all devices.

Imagen1

Buttons

States

  • Primary
    Strong visual weight used to highlight the main action.
  • Secondary
    A less prominent alternative that maintains visual hierarchy.
  • Ghost
    Minimal style preserving full functionality with a subtle look.
Primary
Secondary
Ghost

States Light Mode

  • Navigation
    Neutral button with high visibility, suited for key navigation.
  • Accent
    Adds emphasis without overpowering the layout.
  • Primary
    A standard option that remains clear and readable in light themes.
  • Secondary
    Complements the main actions while maintaining a clean appearance.
Nav Button
Accent Button
Primary Button
Secondary Button

States Dark Mode

  • Navigation
    High contrast design for essential actions in dark environments.
  • Accent
    Visually vibrant to enhance interactions in dark mode.
  • Primary
    Balanced and clear for general usage in low-light interfaces.
  • Secondary
    Subdued styling that fits well within dark themes without losing clarity.
Nav Button
Accent Button
Primary Button
Secondary Button

Semantic

  • Sucess
    Communicates successful actions with a clear and positive tone.
  • Error
    Highlights problems or failed actions with immediate visual feedback.
  • Warning
    Subtly signals caution without overwhelming the interface.
Success Button
Error Button
Warning Button

Link

States

  • Standalone
    Strong visual weight used to highlight the main action.
  • Inline
    A less prominent alternative that maintains visual hierarchy.
Standalone
Inline

States Light Mode

  • Accent
    Neutral button with high visibility, suited for key navigation.
  • Primary
    Adds emphasis without overpowering the layout.
  • Secondary
    A standard option that remains clear and readable in light themes.
  • Tertiary
    Complements the main actions while maintaining a clean appearance.
Accent
Primary
Secondary
Tertiary

States Dark Mode

  • Navigation
    High contrast design for essential actions in dark environments.
  • Accent
    Visually vibrant to enhance interactions in dark mode.
  • Primary
    Balanced and clear for general usage in low-light interfaces.
  • Secondary
    Subdued styling that fits well within dark themes without losing clarity.
Accent
Primary
Secondary
Tertiary

Semantic

  • Sucess
    Communicates successful actions with a clear and positive tone.
  • Error
    Highlights problems or failed actions with immediate visual feedback.
  • Warning
    Subtly signals caution without overwhelming the interface.
Success
Error
Warning