Button
Triggers an action. One strong brand Button per view.
Master
Pick an emphasis, then an intent. Only the allowed pairs show: strong brand or danger, subtle neutral, minimal neutral, brand or danger.
Usage
Pick an emphasis and an intent. Use one strong brand Button per view for the main action. Use subtle (the default) for quieter paths like cancel or back, and minimal for low-emphasis actions. Intent danger is only for work that cannot be undone. Only these pairs exist: strong with brand or danger, subtle with neutral, minimal with neutral, brand or danger. Accessibility is built in: native button, focus ring, loading and disabled states, and a label for icon-only buttons. See contracts/button.json for the full contract.
Do's
- Submit, confirm, open, create, navigate to an action.
Don'ts
- Do not use for in-text navigation (use Link).
- Do not put two strong brand Buttons in one view.
- Do not pair an emphasis and an intent outside the allowed pairs (no strong neutral, no subtle brand or danger).
- Do not invent extra looks.
- Do not set iconSize larger than lg on a Button with a label; big icons are for icon-only Buttons.
<Button emphasis="strong" intent="brand" size="md" > Continue </Button>