Skip to content
Beta

Button

Action

A clear action, with a label, a leading icon or just an icon.

Playground

Try clicking, or focus with Tab and press Enter or Space.

Properties

Changes apply to this example.

All states

4 variants6 states

Hover, pressed and focus appearances are pinned here for comparison. Try the real interactions in the playground.

Primary

Rest
Hover
Pressed
Keyboard focus
Disabled
Loading

Secondary

Rest
Hover
Pressed
Keyboard focus
Disabled
Loading

Ghost

Rest
Hover
Pressed
Keyboard focus
Disabled
Loading

Danger

Rest
Hover
Pressed
Keyboard focus
Disabled
Loading

Size and content

One 36px size
Leading icon and icon-only
Browse icons
Links keep native navigation
Long labels wrap without hiding the action
Loading keeps the same width and accessible label

Usage

Use Primary for the main action, Secondary for supporting actions, Ghost for quiet actions, and Danger for destructive actions. Use a link when the action navigates.

Tab shows keyboard focus; Enter and Space activate an enabled button. Disabled and loading buttons cannot activate. Explain unavailable actions beside the control. These are momentary actions: selected, success and error belong to the surrounding flow.

Content text
A short, specific action label. Icon-only controls require aria-label instead.
icon name
Optional Phosphor Regular icon before the label. Trailing icons are not supported.
icon-only bool
Shows a square icon control. Requires a known icon and a specific aria-label. Keep a title for the hover hint; use a label where the action is unfamiliar.
variant ButtonVariant
Primary, Secondary, Ghost or Danger. Defaults to Secondary.
Size
One 36px size for every ordinary action. Touch targets are at least 44px in both dimensions. There is no caller size option.
disabled bool
The native attribute prevents activation and removes the control from the tab order.
loading bool
Shows a spinner, sets aria-busy and disables the button. Reduced motion keeps a static progress cue.
Native attributes
Type defaults to button; set type="submit" inside a form. Keep the action's data-analytics intent and event bindings at the call site.

Source Components/Beta/Button/