Buttons
Spec
Four kinds, all 44px high, button text style, radius md. An icon, when there is one, is 16px before the label.
Which one
- Primary: the one main action (Save, Next, Add paycheck).
- Secondary (borderless) only appears beside a Primary: Cancel beside Save, Skip tour beside Next.
- Tertiary (stroked) is any other action that stands alone: Set a payday, Show more, Try again.
- Danger is for destructive actions: neutral at rest with a trash icon, red on hover, a 2px red border when pressed.
Rules
- No button is pill-shaped; pills are a different control.
- Buttons are never disabled to signal missing input: they stay enabled and explain what is missing.
- Green text is for links only, with two exceptions: disclosure toggles (Details) and toast actions (Undo).
- Focus: a 2px ring in border-focus, 2px away, drawn as an outline so nothing changes size.
- Figma: Secondary 22-4983, Tertiary 41-6342, Danger 43-6453.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 2 2026: Primary, Secondary, Tertiary and Danger; 44px high; one focus ring (Figma 22-4983, 41-6342, 43-6453).