ComponentsShipped
Button
One form across the site: the solid ink pill. Hover strengthens - the fill goes one measured grade darker, never paler.
Variants
Show code
<button class="btn btn-primary">Primary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-quiet">Quiet</button>
<button class="btn btn-danger">Delete</button>| Variant | Use |
|---|---|
.btn-primary | The one action a section wants. Shipped as .case-link and .contact-actions .primary. |
.btn-ghost | The secondary action next to a primary. Shipped as .contact-actions .ghost (Resume download). |
.btn-quiet | Toolbar and dock actions where many sit together. |
.btn-danger | Destructive confirmation inside a dialog. Spec. |
With icon
Show code
<a class="btn btn-primary" href="#">Explore Case Study <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></a>
<a class="btn btn-ghost" href="#"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Resume</a>
<button class="btn btn-ghost btn-icon" aria-label="Copy link"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button>A trailing arrow nudges 3px right on hover (--d-slow, --ease-out). Icon-only buttons are 44 × 44 and always carry aria-label.
Sizes
Show code
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Medium</button>
<button class="btn btn-primary btn-lg">Large</button>Every size keeps a 44px minimum height; size changes padding and type, never the target.
Shape
Show code
<button class="btn btn-primary">Pill</button>
<button class="btn btn-primary btn-rect">Rect</button>Pills on the site. .btn-rect (--r-sm) only in dense tool UI, where pills read as chips.
States
Show code
<button class="btn btn-primary" data-pending>Click: pending</button>
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-ghost" disabled>Disabled</button>Pending hides the label behind a spinner and sets aria-busy; the button keeps its width so nothing reflows.
Hover grade
--ink (L* 7.2) to --ink-hover (L* 12.7): a +5.5 step picked from a ladder of five. The old hover went to --ink-3, +39.2, and the button went pale exactly when touched.
Do
- One primary per view.
- Use a
<button>for actions and an<a>for navigation. - Label with the outcome: "Explore Case Study", "Resume".
Don't
- Lift buttons with a shadow or translate on hover.
- Invent a second filled colour.
- Use
href="#"for a toggle - it scrolls the page to the top.