Components / actions

Buttons

Buttons create a clear hierarchy for actions, with predictable modes, states, and a visible keyboard path.

How it's used?

A pattern with a job to do.

Use one primary action for the main decision on a surface. Pair it with secondary actions for alternatives and tertiary actions for low-emphasis paths.

02 / examples

See the component in context.

Variant 01

Action hierarchy

Primary, secondary, and tertiary actions work together.

Variant 02

Modes and states

Hover, active, disabled, and loading states are explicit modes.

03 / contract

Component contract

Variants are primary, secondary, and tertiary.
Modes include default, hover, active, disabled, and loading.
Loading disables repeated submission and exposes aria-busy.
The component renders a native button for actions.

04 / accessibility

Accessibility information

Visible focus uses the shared focus ring.
Disabled and loading states are not communicated by color alone.
Button labels remain readable at all supported sizes.
Use a link when the action changes location rather than state.