Skip to main content
github-icon
storybook-icon
ButtonButtons are used to trigger actions or events. This component is based on the Button - Theme-UI and includes a variety of styles, such as primary action, secondary action, or warning.
Required Components
  • The Button component can be used on its own and does not require additional components.
Best PracticesButton should:
  • Be used to trigger actions or events
  • Be clearly labeled with a short, concise verb
Button should not:
  • Be used as links
Accessibility
This component requires an aria-label and adheres to WAI-ARIA accessibility guidelines. Buttons are focusable using the Tab key, and can be selected using the Space or the Enter key.
Primary
Primary buttons are used to indicate which actions users will likely take. Avoid using two primary buttons in the same section.
Default
Default buttons are used as secondary buttons, which offer users actions they are less likely to take.
Disabled
Disabled buttons are used to indicate that actions are unavailable. These buttons are not focusable or actionable.
Text Icon Button
Text Icon buttons display text and an icon that indicates the button’s purpose.
Text Button
Text buttons display only text that indicates the button’s purpose.
Inline
Inline buttons are used as tertiary buttons that are inline with the content.