Components
Buttons & Actions
Buttons
One primary button per view. Labels are short, uppercase verbs.
Primary
Secondary
Text link
Dark (navy tile CTA)
Disabled
Sizes
Large, sentence case — final checkout step
Button states
Three looks in every state. The Default row is live — hover and press it.
| filled | outline | Knockout | |
|---|---|---|---|
| default | |||
| hover | |||
| pressed | |||
| disabled | |||
| On photo / dark |
Side by side — 16px gap, min width 128px
Long labels grow to a max width of 272px
- Height
- 44px
- Width
- 128–272px
- End padding
- 24px
- Gap between buttons
- 16px
- Label
- 14pt, bold, centered
- Outline
- 2px, inside the shape
Button groups
Segmented controls for picking one option from two to four. Each segment is at least 74px wide, 24px padding on the ends, 11px between segments.
Two options
Three options
Four options
On dark
Day & date chips
44px circles for picking delivery days and dates. Days allow several picks; dates allow one.
Days — multi-select
Dates — single select
Action icons
Ten glyphs in three styles. Pick a state to preview it; the Default row is interactive — hover and press it.
| check | alert | close | info | minus | plus | help | down | next | swap | |
|---|---|---|---|---|---|---|---|---|---|---|
| filled | ||||||||||
| outline | ||||||||||
| bare |
Do
Use filled icons for the main action on a tile and outlined or bare icons for secondary actions.Don't
Mix tones within one group, or use an icon without a clear label for screen readers.