Button
Used to trigger an action or event. The most common interactive element in the system.
Preview
Variants
Four variants cover the standard hierarchy of action emphasis.
Three sizes let buttons fit dense toolbars or marketing CTAs.
Disabled is the only programmatic state. Hover and focus are user-driven CSS pseudo-states.
Usage
Use the default variant for the primary action on a page or in a section.
Use multiple default-variant buttons in the same area — they compete for attention.
Lead with a verb in the label: “Save changes”, “Send invite”, “Continue”.
Use vague labels like “OK”, “Submit”, or “Click here”.
Use ghost or outline for secondary actions next to a default button.
Disable a button without explaining why nearby — surface the constraint, not just the state.
Code
1<Button variant="default" size="default">2 Get started3</Button>
Design tokens
| Token | Usage |
|---|---|
--color-action-bg | Default-variant background |
--color-action-text | Default-variant text colour |
--color-action-hover | Default-variant hover background |
--color-secondary-bg | Secondary-variant background |
--color-secondary-text | Secondary-variant text colour |
--color-secondary-border | Outline-variant stroke |
--color-ghost-text | Ghost-variant text colour |
--color-ghost-hover | Ghost-variant hover background |
--lex-radius-md | Corner radius — controls tier |
Accessibility
Use the native <button> element. Provide an accessible name via text content or aria-label. Disabled buttons remove the element from the focus order; if the disabled reason is non-obvious, surface it in adjacent text.
| Enter/Space | Activate the button |
| Tab | Move focus to the next focusable element |
| Shift + Tab | Move focus to the previous focusable element |