Actions

Button

The ranked action. One primary per screen, then secondary, tertiary, ghost and the two danger forms. Labels say what happens: "Publish to brands", "Save draft", "Sync cloths".

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