Components/Actions
Button
Buttons let people take an action with a single click, use them for the most important actions in forms, dialogs and pages
Playground
Playground
Pick a variant, then copy it into Figma
Variants
Variants
Four styles across three types, Primary carries the most emphasis
Sizes
Sizes
States
States
Note
States are values of the State property, focus is handled in code (phase 2)
Usage
When to use
Use when
- You need to trigger an action like Save, Submit or Continue
- A person moves to the next step in a flow
- It is the single most important action in an area
Avoid when
- The action opens another page, use a Link Button
- The action is icon-only, use an Icon Button
- A Primary button already exists in the same area
Guidance
Do and don’t
Pair one Primary button with a Secondary button for the less important action
Don’t put two Primary buttons side by side, nothing stands out
Specs
Tokens and specs
PropertyTokenValue
Container fill#1868D0
Label color#FFFFFF
Corner radius8 px · 6 px on Small
Height—48 / 40 / 32
Padding12 / 10 / 8 px
Icon to label gap4 px
Label styleInter Medium 16/24 · 14/20