DocsComponents

Button

A pill with a 2 px border and a touch target of at least 44 px. Every variant shares one base and differs only by colour tokens.

Variants

Five variants, one base. They differ only by colour tokens; on hover every variant moves to deep blue, the accent of the whole system.

Default · The main action of a step or view.

Secondary · A second action next to the main one.

Outline · Neutral actions, e.g. “Cancel”.

Ghost · Low-weight actions inside toolbars and menus.

Link · Text-weight action; only the colour changes on hover.

Small changes padding, type and icon size, not the touch target: sm still measures at least 44 px high.

sm · 44 px · default · 44 px · lg · 48 px

Icons are decorative (aria-hidden) and never take pointer events.

Hover and focus are forced below so they show without a mouse. The live buttons above react to the real pointer and keyboard.

Rest Hover Focus Disabled

Default

Rest Hover Focus Disabled

Secondary

Rest Hover Focus Disabled

Outline

Rest Hover Focus Disabled

Ghost

On dark surfaces outline gets a 20 % white border and white text; ghost turns white and fills deep blue on hover.

tone = dark · outline, ghost (hover forced on the second of each pair)

Props of Button and ButtonLink. Any other native button attribute passes through.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "link"`	`"default"`	Colour set. All variants share one base (shape, border, sizes).
`size`	`"sm" \| "default" \| "lg"`	`"default"`	sm and default keep a 44 px minimum height; lg is 48 px.
`tone`	`"light" \| "dark"`	`"light"`	Dark tone re-colours outline and ghost for dark surfaces.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type; never submits a form by accident.
`disabled`	`boolean`	`false`	50 % opacity, no pointer events.
`href + link`	`string + link component`	–	ButtonLink: the same look for navigation; the app injects its router link.

Native button element: Enter and Space work, screen readers announce a button.
Touch target of at least 44 × 44 px in every size (WCAG 2.5.5).
Focus-visible ring 3 px in the ring token at 50 %; hover alone never carries meaning.
Contrast: default 15.7:1, hover 7.6:1, secondary 16.3:1, outline 13.3:1 on the page background.
Link variant: 4.76:1 on white but 4.32:1 on the page background, so it belongs on cards, not directly on the lilac page.
Icon-only buttons need an accessible name (aria-label); icons themselves are aria-hidden.

DoUse ButtonLink when the action navigates, so the browser treats it as a link (new tab, history).

Don’tDon’t restyle one button per screen. A new look is a new token or variant in the system, not a local override.