Actions

Icon button

A square button that carries only an icon: row menus (⋯), edit, close, remove. Always named for assistive tech and usually paired with a tooltip.

Live specimen

Lifted from the approved family page at build time; interact with it.

Buttons

Button · ranked: one primary, then secondary, tertiary, ghost and danger.

One primary per screen; secondary and tertiary step back

Navy birdseye two-piece suitDraft changes since v4 · saved Today 14:20

Variants

Sizes, icon buttons and a group

Primary

default

hover

focus

disabled

loading

Secondary

default

hover

focus

disabled

loading

Tertiary

default

hover

focus

disabled

loading

Danger

default

hover

focus

disabled

loading

Icon button

default

hover

focus

disabled

loading

Uses.btn-primary.btn-secondary.btn-tertiary.btn-ghost.btn-danger.btn-danger-quiet.sm.lg.icon-btn.fc-bgroup--r-control--e-btn--focus-ring

from families/form-controls/#buttons