Loading navigation…
User
Usage
Button is the default actionable control for committing tasks: submit a form, confirm a modal, launch an export, acknowledge a callout. Dispatch leans on Secondary as the baseline and elevates a single Primary or Critical action per region so operators always know the safest default. The rule is emphasis discipline—every visual surface has exactly one "most important" action, and everything else is peer-level or lower. Mixing two primaries in one region forces the eye to choose, which is the failure mode buttons are supposed to prevent.
Modal.IconButton with an accessible name.SegmentedControl.Switch.IconToggle.ToggleGroup items (ToggleGroupItem), not Button with toggle.| Type | Emphasis | Typical use |
|---|---|---|
Primary | One per region | The safe, committed happy path |
Secondary | Peer level | Most dispatch buttons—cancel, apply, edit, close |
SecondaryAlt | De-emphasized peer | A secondary next to another secondary when only one should be visually weighted |
Critical | Single attention call | High-stakes commits (rare; reserved for safety-critical flows) |
Destructive | Delete, remove, revoke | Destructive verbs with destructive styling; always confirmed |
Link | Lowest emphasis | Navigation-styled actions that don't carry commit weight |
formatMessage.type={ButtonType.Link} with href for real destinations. Without href, the control does not navigate—even when it looks like a link.active vs toggle. active forces momentary/open styling (brightness or transparent-active backgrounds) without aria-pressed. Use toggle with pressed / defaultPressed / onPressedChange when the control must stay pressed and announce sustained state. Sustained data-state="on" styling: selected inset fill on ButtonType.Secondary; brightness(var(--brightness-active)) on filled types (Primary, Critical, SecondaryAlt, Success, Destructive).Do
Primary or Critical per region. Two primaries in the same frame is almost always a design problem wearing two coats.Destructive with explicit copy ("Remove", "Delete permanently")—never rely on color alone.Don't
Primary next to a Critical in one region; the emphasis escalation is ambiguous.Buttons surface visible focus rings, accessible names, and disabled states that assistive technology can announce. See Accessibility for the keyboard model, labelled-by patterns, and disabled-state contract.