Components

Button

Lets people start an action and makes the most important action in an area easy to find.

Storybook: Storybook
Source: Source

When to use

Use Button for actions that change something on the current page: saving, sending, confirming, downloading a file.

When not to use

To go to another page: Use a link. If it has to look like a Button, render an <a> with render (see the Code tab).
To turn a setting on or off: Use a Switch.
To offer many options: Use a DropdownMenu. Do not line up more than four Buttons side by side.

Anatomy

Containerbackground, border and corner radius; its height follows the chosen size.
Labela short text that names the action with a verb and an object.
Focus ringdrawn 2 px outside the Button, only for keyboard focus.

Behaviour

A click, Enter or Space starts the action.
On hover and while pressed, the background steps one shade darker; the colour change takes 110 ms.
The focus ring is drawn only when the Button is reached with the keyboard, not on a mouse click.
A disabled Button ignores all events, and the cursor shows it.
A loading Button ignores clicks and keys but keeps focus; it works again once the action ends. When disabled is also set, loading wins: the Button stays focusable and has aria-disabled. Once loading ends, the disabled look and rules apply.
Keyboard and screen reader details are on the Accessibility tab.

Guidelines

These seven rules keep Button meaning the same thing across the product.

One primary action per area

A primary Button tells people “continue here”. With two primary Buttons side by side, nobody can tell which path is the main one.

DoThe main action is primary, the other one tertiary.

Don'tTwo primary Buttons force people to choose.

Say what will happen

The label alone should say what happens on click. Labels such as “OK” or “Yes” make people read the surrounding text to find out.

DoVerb and object together: it is clear what gets downloaded.

Don'tA generic label does not say what the action does.

Use the danger tone for actions that cannot be undone

Deleting, cancelling and other actions that cannot be reversed use the danger tone and ask for confirmation.

DoThe danger tone signals the outcome; a confirmation step follows.

Don'tThe neutral primary Button makes deleting look routine.

If you disable it, say why

A Button that is disabled without explanation leaves people guessing what to do.

Fill in the required fields first.

DoThe missing condition is written right below; the Button stays focusable.

Don'tA disabled Button with no explanation hides the missing step.

Keep loading for long actions

The spinner tells people that a request taking longer than about a second has been received, and it blocks a second click. On an action that finishes at once it only flickers.

DoThe spinner runs while the request is in flight; the Button keeps its width.

Don'tClearing a filter finishes at once; the spinner only flickers.

Do not spin on validation errors

Locking the Button and spinning while the form is invalid says something is in progress, when what people need to do is fix the error. Keep the Button enabled and write the error under the field.

Field label

Error message goes here

DoThe error is under the field; the Button stays enabled so people can fix and resend.

Field label

Error message goes here

Don'tThe spinner covers up the error that needs fixing.

An icon never replaces the label

In this version every Button has a visible label. An icon supports the label; on its own, not everyone reads it the same way.

DoThe icon supports the label; the text says what happens.

Don'tIcon-only Buttons are not supported in this version; what it does is left to guesswork.

Content

Use sentence case: capitalise only the first word (“Download report”, not “Download Report”).
Keep it to one to three words, verb first: “Download report”, “Save draft”.
No punctuation, no “please”, no exclamation marks.
Use the same word for the same action everywhere: if one screen says “delete”, another should not say “remove”.
Turkish labels are often longer than their English equivalents; check layouts with Turkish text.

English	Turkish
Save	Kaydet
Submit	Gönder
Save draft	Taslağı kaydet
Download report	Raporu indir
Delete file	Dosyayı sil

Platforms

Desktop: Action groups align to the right; the primary Button sits at the far right of the group.
Mobile: The main action sits at the bottom of the screen, full width and large. Cancel sits below it in the tertiary variant.

Glass

variant="glass" and variant="glass-prominent" are for controls over a photo, a video or a busy backdrop. They are glass even without a glass Provider. glass-prominent is tinted with the primary colour and has no highlight, so its label keeps its contrast. Where glass renders solid (more contrast, forced colours, reduced transparency, no backdrop blur) they look like secondary and primary. They have no danger tone. Use at most one glass-prominent per group.

TextInput: Button is often the submit action of a form.
Badge: To show the status of a record (Approved), use Badge, not Button.