Buttons
Buttons are for doing something: saving, joining, deleting. Every example on this page is the app’s real component.
Variants
Section titled “Variants”| Style | When to use | Real examples |
|---|---|---|
| Primary | The main action on a screen | Join, Submit, Sign Up, Finish |
| Secondary | The other choice next to a primary, or a quieter action | Cancel, Reject, Resend, Go back |
| Tertiary | A low-key action inside a card | Edit |
| Danger | Deleting something: a jaunt or an account. Nothing else | Delete jaunt, Delete account |
| Mini | A short label with a trailing icon, where the whole pill is one action | Randomise |
States
Section titled “States”Normal
Pressed (shown held down)
Working: label changes, button disabled
Disabled: 50% opacity
| State | What happens |
|---|---|
| Pressed | The whole button shrinks to 95% for 100ms. If the button has an icon and a label, only the icon shrinks (to 88%) and the label stays still |
| Working | The label changes to an “-ing” word with an ellipsis (“Saving…”, “Joining…”) and the button is disabled until it’s done |
| Disabled | 50% opacity, and the pointer shows it can’t be tapped |
Anatomy
Section titled “Anatomy”| # | Part | Value |
|---|---|---|
| 1 | Fill | Changes by style (Action for Primary) |
| 2 | Height | Fixed 44px, whatever the label. Centred content, not padding, keeps “Add” and “Get started” the same height |
| 3 | Border | 1px, changes by style (Action Dark for Primary) |
| 4 | Label | H5 (18px), weight 400, not bold |
| 5 | Corners and shadow | 15px corners, the one shadow-elevated shadow |
A standard button fills the width it’s given, so set the width on its container.
Icon buttons
Section titled “Icon buttons”A second button family: a plain 40px circle, not a pill. It’s for a single
icon action next to a title pill: a chevron to open a section, a plus to add
something, an X to close, and a hand to nudge everyone who hasn’t voted yet.
They all share one style (pillButtonClass). The whole circle shrinks when
pressed.
The add button is a special case. Its plus rotates 45° into an X once the add form is open, rather than swapping to a separate close icon.
Open
Add
Close
Nudge
Action pills
Section titled “Action pills”Full-width rows inside a green edit card, with the label on the left and its icon on the right. Used on Who, when editing a member: Re-invite (Action colours) and Remove (Error colours).
Do and don’t
Section titled “Do and don’t”Danger is only for deleting
Use Danger to delete a jaunt or an account. Don't use it for errors: that's what the Error chip is for.
Say what it does
Use a specific verb. Don't use a generic "OK" or "Confirm".
Show it's working
While it works, change the label ("Saving…") and disable the button. Don't leave it looking ready to tap again.
Accessibility
Section titled “Accessibility”- Every button is a real button: it works with the keyboard and screen readers.
- Round icon buttons carry a label (“View Where”, “Close”, “Nudge everyone who hasn’t voted”).
- A disabled button is truly disabled, not just faded.
- With “reduce motion” on, buttons don’t shrink when pressed.
Source
Section titled “Source”src/web/components/Button.tsx: the standard buttonpillButtonClassinsrc/web/components/TitlePill.tsx: the icon button stylesrc/web/components/ActionPill.tsx: action pills- Press feedback:
src/web/index.css