Button
Triggers an action or navigates to another surface. The most important control in the system — used dozens of times per screen.
Usage
Buttons label the action with a verb. Primary actions use the brand colour; everything else degrades through a clear hierarchy.
Variants
Six variants ordered by visual weight. Use exactly one primary per screen.
Hierarchy in action
Sizes
Default is 36px. Small (30px) inside tight toolbars; large (44px) on landing CTAs.
With icon
States
Hover and focus are handled automatically. Disabled uses 50% opacity and disables pointer events.
Anatomy
| Property | Value | Notes |
|---|---|---|
| height | 36px | 30 small · 44 large |
| padding | 0 14px | 0 10px small · 0 18px large |
| radius | --button-radius (8px) | Pill variants use --radius-pill |
| font | 500 14px / 1 sans | 13px small · 15px large |
| transition | --dur-fast (120ms) | --ease-out · bg · border · color · shadow |
| focus | 2px outline + 2px offset | Brand focus ring |
Do & don't
Use exactly one primary button per screen. The most important next action.
Place two primary buttons side-by-side. The user can't tell which is more important.
Label with a verb in sentence case — "Approve entry", "Save draft", "Open invoice".
Use noun-only labels — "Approval", "Draft", "Invoice" — they read like static text, not actions.
Use destructive variants only when the action is irreversible or affects another user.
Mark routine actions destructive. Reserve red for actual stakes.
Code
<!-- Primary --> <button class="btn btn-primary">Record shift output</button> <!-- With leading icon (uses inline icon helper) --> <button class="btn btn-secondary"> <span data-icon="plus"></span>New entry </button> <!-- Icon-only (always include aria-label) --> <button class="btn btn-icon" aria-label="Settings"> <span data-icon="settings"></span> </button>
Related
For toggleable filter chips with icons, see Chip & tag. For two related actions, see the Data toolbar pattern.