Button
Triggers an action. If it navigates somewhere, it should be a link instead.
Definition
A button performs an action in the current context. The distinction from a link is not visual: buttons act, links navigate. Getting this wrong breaks keyboard behaviour, middle-click, open-in-new-tab and screen reader announcements.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
Variants and what each means
| Variant | Meaning | Count per view |
|---|---|---|
| Primary | The expected next action | One. |
| Secondary | A real alternative | One or two. |
| Tertiary or ghost | Low-emphasis actions | As needed. |
| Destructive | Removes or destroys | Visually distinct from primary, never the default focus. |
| Link-styled button | An action that must sit inside text | Use sparingly. Behaviour still has to be a button. |
Specify every state
- Rest, hover, focus visible, active, disabled, loading, and each of those per variant.
- Loading state must prevent double submission and keep the button's width stable so the layout does not jump.
- Minimum target 24 by 24 CSS pixels for WCAG 2.2 AA, with 44 by 44 preferred on touch.
- The accessible name comes from the visible label. Icon-only buttons need aria-label and a tooltip.
- Never disable a submit button as the only way of communicating an incomplete form.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Consistency and StandardsHeuristic
- Fitts's LawLaw
- Von Restorff EffectLaw
- Affordances and SignifiersPrinciple
- Brand Color in InterfacesUI foundation
- EmphasisUI foundation
- IconographyUI foundation
- ShapeUI foundation
- Visual StatesUI foundation
Depends on
Get these right first, or this one will not hold.
- Accessible NamesAccessibility
- Focus IndicatorsAccessibility
- Target SizeAccessibility
Often used with
These usually appear in the same screen or the same decision.
- LinkComponent
- Destructive ActionsPattern
- Loading StatesPattern
Related concept
Connected closely enough to change how you apply this.
- Button and Action LabelsUX writing
- MicrocopyUX writing