Button Overview

The button component is a versatile interactive element that triggers actions when clicked. It can be used to submit forms, navigate to new pages, open dialogs, or trigger any other action that can be handled by JavaScript. Buttons are fundamental building blocks of user interfaces and should be used for actionable items.

Design system docs When to Use

✅ Use buttons when:

  • Triggering an action (submit, save, delete)
  • Opening modals or dialogs
  • Performing in-page operations
  • Form submissions

❌ Don't use buttons for:

  • Navigation between pages (use links instead)
  • Toggling states (use toggle buttons or switches)
  • Presenting choices (use radio buttons or checkboxes)
Examples Variants & Hierarchy

Buttons follow a clear visual hierarchy. Primary buttons should be used sparingly for the most important actions, with outline and subtle variants for secondary actions.

Light theme variants Primary Outline Subtle Subtle neutral Subtle quiet Clean
Inverted variants Primary inverted Outline inverted Subtle inverted Subtle quiet inverted
Pure CSS implementation