Buttons

Component status

When to use a button

Buttons should be used to trigger actions, such as submitting a form, opening a modal, or expanding a dropdown. Generally speaking, they should not be used for navigation - for that, use an anchor tag (<a href="...">).

Accessibility considerations

Buttons should always have an accessible name, which should be descriptive of the action that will be triggered when the button is clicked. Avoid using generic labels such as "Submit" or "Apply", and instead use a more descriptive label that helps to convey the action that will be triggered.

If the button is used to modify the state of an item on the page, such as opening a modal, or expanding a section, then the button should also have the appropriate aria- attributes to indicate that it affects that component, such as the aria-controls attribute.

Buttons should also be reachable by keyboard, and should be able to be activated using the Enter key. This is important for users who may use a keyboard only, or who may have difficulty using a mouse. They should also have distinct focus and hover states, so that they are easily distinguishable from other interactive elements on the page.

Variants

Base

Base Button

<button>Base Button</button>

Small

Small Base Button

<button class="small">Small Base Button</button>

Primary

Primary Button

<button data-theme="primary">Primary Button</button>

Small Primary

Small Primary Button

<button data-theme="primary" class="small">Small Primary Button</button>

Secondary

Secondary Button

<button data-theme="secondary">Secondary Button</button>

Small Secondary

Small Secondary Button

<button data-theme="secondary" class="small">Small Secondary Button</button>

Inline

Inline Button

<button data-theme="inline">Inline Button</button>

Small inline

Small Inline Button

<button data-theme="inline" class="small">Small Inline Button</button>

Suggestion

Suggestion Button

<button data-theme="suggestion">Suggestion Button</button>