Button

Triggers an action. Pick the variant by how much attention the action deserves and the size by the surface it sits on.

Quick reference

Variants

Hover each swatch to see its interaction state.

Naming: a tone that shows at rest leads (destructive, destructive-secondary); a tone that only appears on interaction follows the base (ghost-destructive, soft-accent, outline-destructive). How a button rests — muted or rounded — is a modifier, not a variant.

Every destructive and soft-tinted variant also shifts on keyboard focus, so the signal isn’t mouse-only. MiniButton takes the same variants and defaults to soft. Add muted to rest any non-filled variant at the muted text color.

Sizes

MiniButton sizes

A separate, text-relative scale: the box matches the line height of the text it rides next to.

Which button component?

Recipes

Dialog footer

Default size. Cancel on the left as ghost, the primary action on the right. Label them Cancel and Save (not “Apply”). AlertDialogCancel renders outline by default.

Popover actions

Popovers step down to size="xs".

Table row actions

Keep rows quiet: sm for a labeled action; for icon-only ones, a muted ghost variant — ghost, ghost-success, or ghost-destructive.

Link or download styled as a button

For in-app navigation use ButtonLink. For an external URL or a file download, render the button as an anchor:

Async action

For a one-shot action that should show pending → success/error in place, use ActionButton. For a submit that just blocks while pending, pass loading (see Loading).

Choosing emphasis

Variants are a ladder, not a palette. Give a view one primary action and step everything else down, so the primary stays the obvious payoff.

• Primary (default, accent, destructive) — one per view. Reach for accent only for a clearly affirmative, brand-forward action, and keep it to one per view.
• Secondary (secondary, outline, destructive-secondary) — “not the main thing, but still a real button.”
• Tertiary (soft*, ghost*, outline-destructive, link) — frequent, repeated, or inline actions that shouldn’t compete for attention.

With icons

Mark a leading or trailing icon with data-icon="inline-start" / "inline-end" so the padding tightens on that side.

Icon only

Use an icon* size and always pass an aria-label.

Modifiers

Boolean props that combine with any variant.

Rounded

Add rounded to fully round any button — a pill for text, a circle for icon-only. For small text-scaled chips, use MiniButton instead of hand-sizing an icon button.

Muted

muted rests the label or icon at the muted text color; the variant’s own hover and focus colors still apply. Use it for quiet, repeated controls — clear buttons inside inputs, icon actions in table rows — so they recede until reached for. It has no effect on filled variants (default, accent, destructive, destructive-secondary), which set their text against the fill.

MiniButton

MiniButton is a small, text-scaled icon button — the ×, +, −, or trash that rides next to text (a chip, list row, dialog, or toast). It’s a <Button rounded> preset on a text-relative size scale (MiniButton sizes), distinct from Button’s control-row sizes. Pass the glyph as children; pick emphasis with variant (defaults to soft). Always pass an aria-label.

In a row — the label owns the space, the button rides the trailing edge and reddens on hover:

Loading

loading shows a spinner and disables the button until it clears.

Disabled

Props

Also accepts every native <button> attribute (type, onClick, aria-*, …).