Skip to content
UX Atlas
Plate CMP·001 · ComponentGrid E2 · Rev. 2026-08-14

Button

Triggers an action. If it navigates somewhere, it should be a link instead.

ComponentCraft conventionFoundational

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.

On this plate
  1. 1Definition
  2. 2Variants and what each means
  3. 3Specify every state
  4. 4Labels, states and semantics
  5. 5In practice
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Triggering any action in place.
  • Submitting a form.
  • Opening a dialog.

Common mistakes

  • Buttons used for navigation.
  • Multiple primary buttons in one view.
  • Disabled buttons with no explanation.
  • Icon-only buttons with no accessible name.

Variants and what each means

VariantMeaningCount per view
PrimaryThe expected next actionOne.
SecondaryA real alternativeOne or two.
Tertiary or ghostLow-emphasis actionsAs needed.
DestructiveRemoves or destroysVisually distinct from primary, never the default focus.
Link-styled buttonAn action that must sit inside textUse 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.

Labels, states and semantics

Do

  • Label with the action, in the reader's words: Save changes, Delete project.
  • Use the button element for actions and an anchor for navigation.
  • Keep the label stable during loading, adding a state rather than replacing the text.
  • Give icon-only buttons an accessible name and a tooltip.

Do not

  • Use OK and Cancel where the consequence could be named.
  • Put two primary buttons in one view.
  • Disable the submit button until the form is valid, which hides why it cannot be pressed.
  • Let a double press submit twice. Guard it in the handler, not only in the styling.

In practice

  1. i.

    Cancel, Cancel

    Ambiguous labels

    A dialogue asking about cancelling a subscription, with buttons labelled Cancel and OK, is genuinely unanswerable. Keep subscription and Cancel subscription say what each one does.

  2. ii.

    The disabled submit

    Hiding the problem

    A greyed submit with no explanation leaves the reader comparing their form against an invisible rule. Letting the press happen and showing what is wrong is faster, and it is what the error summary is for.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Link

Component

A control that moves the reader to another location, which has an address.

Key difference

A button does something on the page you are on. A link takes you somewhere else. The difference is not visual: it decides keyboard behaviour, middle-click, open in new tab and what a screen reader announces.

Use Button when

  • The result is a change of state, not a change of location.
  • It submits, saves, opens, toggles or deletes something.
  • There is no URL that would make sense to open in a new tab.

Use Link when

  • The destination has a URL, in-page anchors included.
  • Opening it in a new tab or copying the address should work.
  • The text can name where the reader is going.

Learn about Link

Local chart

CMP·001 · Region III · Grid E2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Consistency and StandardsHEUR·004 · PRINCIPLES BEHIND THISFitts's LawLAW·002 · PRINCIPLES BEHIND THISVon Restorff EffectLAW·009 · PRINCIPLES BEHIND THISAffordances and SignifiersPRIN·007 · PRINCIPLES BEHIND THISBrand Color in InterfacesFND·024 · PRINCIPLES BEHIND THISEmphasisFND·018 · PRINCIPLES BEHIND THISIconographyFND·050 · PRINCIPLES BEHIND THISShapeFND·046 · PRINCIPLES BEHIND THISVisual StatesFND·053 · PRINCIPLES BEHIND THISAccessible NamesA11Y·008 · DEPENDS ONFocus IndicatorsA11Y·003 · DEPENDS ONTarget SizeA11Y·011 · DEPENDS ON

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

A CheckoutA FormA Mobile AppA Pricing PageAn Onboarding FlowAuthentication

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Related concept

Connected closely enough to change how you apply this.