Chapter 2 — Components · Section 06
Buttons
All buttons use font-label (Space Grotesk) at 14px semibold. Gradient buttons use filter:brightness(1.08) on hover and scale(0.98) on press. Never use spring or bounce easing.
Accessibility
All buttons must have a visible label or aria-label for icon-only variants. Focus ring: focus-visible:outline-2 outline-primary outline-offset-2. Disabled state uses opacity-40 cursor-not-allowed — exempt from contrast requirements per WCAG but must still look intentional.
Filled — Gradient
Primary · Secondary · Tertiary
Tonal — container background, on-container text
Outline
Outline — transparent bg, border + colored text
Ghost & Text
Ghost — surface bg hover · Text — opacity fade only
Icon Variants
Icon-only · Leading icon · Trailing icon
Destructive & Special
Destructive · Loading · Disabled
Size Scale
Small · Medium · Large — filled + outline
State Reference
| State | Filled bg | Outline border | Ghost hover | Text |
|---|---|---|---|---|
| Rest | grad-primary-cta | border-primary | — | text-primary |
| Hover | brightness(1.08) overlay | bg-primary/8 | bg-surface-container-high | opacity-70 |
| Focus | + outline-2 outline-primary | + outline-2 outline-primary | + outline-2 outline-primary | + outline-2 outline-primary |
| Active | scale(0.98) | scale(0.98) | scale(0.98) | scale(0.98) |
| Disabled | opacity-40 cursor-not-allowed | opacity-40 cursor-not-allowed | opacity-40 cursor-not-allowed | opacity-40 cursor-not-allowed |