Button
The main way to act on a page: submit a form, start a flow, confirm a choice. One component in three intents, four modes and three sizes, so every button in a product comes from the same place.
Preview
When to use
- For the action a screen exists for — Save, Continue, Create — as the one filled primary.
- For secondary actions beside it, in the stroke or lighter mode, so the primary stays the obvious one.
- For destructive actions, in the error intent, and never as the only way out of a dialog.
Reach for something else
- To go somewhere rather than do something: that is a Link Button.
- For several peers answering one question: that is a Button Group or a Segmented Control.
Anatomy
- 1
Container
Carries the intent's colour and the radius; the whole box is the hit area.
- 2
Leading icon
Optional, 20px, reinforces the verb — never replaces it.
- 3
Label
A verb in sentence case: Save changes, not OK.
- 4
Trailing icon
Optional, for direction (→) or a menu (chevron).
States
Default
At rest, in its intent and mode.
Hover
One step darker; the cursor becomes a pointer.
Pressed
Settles 1px down, so the press is felt.
Focus
A visible ring outside the container, for keyboard users.
Disabled
Muted and inert; say why nearby rather than leaving it greyed with no reason.
Accessibility
- Renders a native <button>, so Enter and Space work and it is announced as a button.
- An icon-only button carries an aria-label that names the action.
- Disabled uses the disabled attribute, so it drops out of the tab order and is announced as unavailable.
- The focus ring meets 3:1 contrast against the page and never relies on colour alone.
Source
The Button is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block