Button
.btn is the base class for every action button. Default style is outline; on hover it fills with the primary color. Solid (filled) buttons are not a default variant. New buttons should extend .btn and add only layout overrides.
Default
Global .btn — pill shape, 40 px tall, outline. Hover fills with primary.
States
Hover fills with primary; focus-visible shows a 2 px primary outline; disabled is visually inactive. Try tabbing to the button to verify keyboard focus.
Surface Adaptation
There is only one button (.btn), but its foreground and background adapt to the surface beneath it. On light surfaces, use .btn as-is (outline → hover primary fill). On dark surfaces, use the inverted variant (outline → hover sky fill). Light/dark mode switching is handled automatically by tokens, so the inverted button below is only for surfaces that are intentionally dark — such as ink-deep section bands.
deprecated — solid variants
The solid filled buttons from the legacy kit (v6) — primary, dark, and sky fill — are no longer components. Fill only exists as the hover state of .btn. When a context requires color emphasis (e.g., a CTA on a colored section), do not create a new button — follow the per-surface CTA color pairings documented at /design/surfaces.
Spec
Single definition: .btn in app/globals.css.
- Default: transparent background + 1 px border (
--card-border), ink-deep 700 text, pill shape - Size: height 40 px, padding 0 22 px
- Hover: background and border set to primary, text white
- Focus-visible: 2 px primary outline, offset 2 px
- Dark mode: follows tokens automatically (including white text override)