Scale — Button

Install

Examples

Types

Thirteen visual types, ordered by emphasis. Pair the highest-emphasis primary with lower-emphasis variants so a single action stands out.

Primary

Secondary

Tertiary

Tertiary mono

Inverse

Mono

Outline

Outline mono

Text

Text mono

Negative primary

Negative outline

Negative text

Sizes

Large

Medium

Small

States

Disabled

With icons

Add a leading-icon or trailing-icon to reinforce the action. Keep labels — icon-only actions belong in Button Icon.

Download

Learn more

Open

Guidelines

Usage

primary user actions, form submissions, navigation triggers — any interactive call to action.

Do

Lead each view with a single primary action.
Use a clear, action-led verb for the label — “Save”, “Download”.
Pair a high-emphasis primary with lower-emphasis secondary or tertiary buttons.

Don’t

Don’t stack several primary buttons competing for attention.
Don’t ship icon-only buttons here — use Button Icon.
Don’t disable a button without making the reason obvious nearby.

Accessibility

Element: renders a native <button>; with an href it renders an <a> link instead — both keyboard focusable.
Activation: Enter / Space activates a button; a link follows on Enter.
Busy / disabled: loading and disabled set aria-busy / the disabled state and block activation.
Label: the visible text carries the meaning — keep a label rather than relying on an icon alone.
Focus: shows the global keyboard focus ring.

Properties

Button Icon — icon-only actions in dense toolbars.
Button Group — a set of related buttons in one row.
Button Pill — pill-shaped toggles and filter chips.

Button