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.
Dialog.Button with an accessible name.SegmentedControl.Switch.IconToggle.ToggleGroup items (ToggleGroupItem), not Button with toggle.intent is ButtonIntent: Neutral (default), Accent, Destructive, Success, Warning. variant is ButtonVariant: Soft (default), Solid, Ghost, Plain. On Neutral Soft, softFill defaults to Outline (bordered, transparent). Set softFill={ButtonSoftFill.Filled} when the design needs a filled neutral soft surface.
| Pairing | Emphasis | Typical use |
|---|---|---|
| Accent Solid | One per region | The committed happy path |
| Neutral Soft Outline | Preferred secondary | Cancel, apply, close in dialogs and panel footers (SECONDARY_BUTTON_LAYOUT) |
| Neutral Soft Filled | Alternate secondary | Legacy filled secondary where outline is not yet adopted |
| Neutral Ghost | Tertiary | Reset, a quieter action beside Cancel |
| Destructive Solid | Delete, remove, revoke | Destructive verbs; always confirmed |
| Plain | Lowest emphasis | A text-styled action. Navigation is Link, not Plain |
formatMessage.Link with href. Button does not accept href. variant={ButtonVariant.Plain} is a text-styled action, not a link.loading and loadingLabel. The label stays visible, the button is disabled, and a loader glyph is announced through the loading label.active vs pressed. active is a momentary marker without aria-pressed. Use pressed / defaultPressed / onPressedChange when the control must stay pressed. Selected paint uses aria-pressed. Do not pass a toggle prop.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.Primary next to a Critical in one region; the emphasis escalation is ambiguous.