Buttons
Pill-shaped controls with flat surfaces. Display Pro Bold labels, 44px minimum touch target.
Overview
Button styles live in components/button.css. Use <button> for
actions and <a class="button"> for navigation. No box shadows. Large buttons
are ~52px tall; small buttons are 44px minimum.
Filled variants
Primary gradient
Solid colors
Outlined variants
1px explicit stroke. Transparent interior. No shadow.
Text buttons
No background or shadow. Underlined labels.
Sizes & layout
Sizes
Full width
Icon only
Circular icon-only buttons. Always include an aria-label.
States
Loading
Click any button to morph into spinner-only loading, or use
startButtonLoading(button) / stopButtonLoading(button).
Loading (static)
Success
Toggle & group
Toggle / selected
Button group
Focus & usage
Focus visible
Tab to a button to see the keyboard focus ring.
Usage notes
- Use design tokens — do not hardcode color values on buttons.
- Primary CTA:
button--primary(gradient). Use intentionally, not everywhere. - Accent blue filled button uses dark text — contrast is intentional for cyan (#36D2F7).
- Loading: set
aria-busy="true"and disable interaction. - Icon-only buttons require an
aria-label.