Button

Usage

Use a button to start an action on the current screen: save a work order, assign a mechanic, export a report. Use a link instead when the result is navigation to another page; a link styled as a button (<a class="btn">) is allowed only for that case.

• Primary — the one main action of a region (a form, a dialog, a panel). Teal is reserved for this; never two primaries side by side.
• Secondary — alternatives next to the primary ("Save draft" next to "Close work order").
• Ghost (tertiary) — low-emphasis actions in dense areas: table rows, toolbars, "Cancel".
• Destructive — deletes or retires something. Always confirm in an alert dialog or offer undo.

Labels: verb + object, sentence case, three words or fewer ("Assign mechanic", "Export service log"). Avoid "OK", "Submit", "Click here". Keep paired labels parallel ("Save draft" / "Close work order"). Allow +40% length for translations — buttons wrap their row, never truncate the label.

Anatomy

1. Container — <button type="button|submit" class="btn">, 8px radius, height from --button-height-*
2. Label — .btn__label (required when an icon or spinner is present)
3. Leading or trailing icon (optional) — svg.btn__icon, aria-hidden="true"
4. Spinner (loading only) — .btn__spinner, overlays the label so the width doesn't change

Examples

States marked hover, focus-visible and active are frozen with .is-hover, .is-focus-visible, .is-active. Those classes share their rule with the real pseudo-class, so what you see is exactly what users get. Never use them in product code.

<button type="button" class="btn btn--primary">Assign mechanic</button>
<button type="button" class="btn btn--primary btn--sm">Assign mechanic</button>
<button type="button" class="btn btn--primary btn--lg">Assign mechanic</button>

<!-- Unavailable: disabled (skipped by Tab) or aria-disabled (focusable, explains why) -->
<button type="button" class="btn btn--primary" disabled>Assign mechanic</button>
<button type="button" class="btn btn--primary" aria-disabled="true" aria-describedby="close-why">Close work order</button>

<!-- Loading: keep the label (it stays the accessible name), announce progress separately -->
<button type="submit" class="btn btn--primary" aria-busy="true" aria-disabled="true">
  <span class="btn__label">Save work order</span>
  <span class="btn__spinner" aria-hidden="true"></span>
</button>
<span role="status" class="sr-only">Saving work order WO-4182…</span>

<button type="button" class="btn btn--secondary">Save draft</button>

<button type="button" class="btn btn--ghost">View history</button>

<button type="button" class="btn btn--destructive">Retire vehicle</button>

<button type="button" class="btn btn--primary">
  <svg class="btn__icon" aria-hidden="true" focusable="false"><use href="#icon-plus"></use></svg>
  <span class="btn__label">New work order</span>
</button>

<!-- Directional icons mirror in RTL -->
<button type="button" class="btn btn--primary">
  <span class="btn__label">Continue to parts</span>
  <svg class="btn__icon icon--mirror-rtl" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg>
</button>

<button type="button" class="btn btn--primary btn--lg btn--full-width">…</button>

API

Do and don't

Accessibility

• Role: native <button> (WAI-ARIA APG Button pattern). Always set type; without it a button inside a form submits that form by accident.
• Name: the visible label. Icons inside a labelled button are aria-hidden="true" focusable="false". Icon-only buttons belong to the icon-button component and need aria-label.
• Loading: the label stays in the accessibility tree (hidden with opacity, not visibility), so the name doesn't change. Announce progress and the result in a role="status" region.
• Focus: 2px teal ring with 2px offset from --focus-ring-* (≥ 3:1 in every theme). It is never removed.
• Target size: smallest button is 32px high and at least 32px wide (WCAG 2.5.8 needs 24px). Use .btn--lg (48px) on tablet screens mechanics use with gloves.
• Contrast: label/background pairs color.action.*.fg on color.action.*.bg are checked at 4.5:1 by ds check. Disabled buttons are exempt but still readable.
• Forced colors: every variant keeps a 1px border so buttons stay visible when backgrounds are removed.

Tokens