Buttons — Primary, secondary and tertiary

An action hierarchy with primary, secondary and tertiary buttons, plus destructive, icon-only, disabled and loading variants. Use it to compare action emphasis and control states.

ReactHTML

1440 × 480

Open in new tab

Component.tsx21 lines

export default function ButtonsHierarchy() {
  return (
    <div className="grid w-72 gap-3 text-neutral-900 sm:w-[36rem] sm:grid-cols-3">
      <button type="button" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Primary action</button>
      <button type="button" className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Secondary action</button>
      <button type="button" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium text-neutral-900 underline underline-offset-4 transition-colors hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Tertiary action</button>
      <button type="button" className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M3 6h18M9 6V4h6v2M5 6l1 14h12l1-14M10 10v6M14 10v6" /></svg>
        Delete item
      </button>
      <button type="button" aria-label="More actions" className="inline-flex size-11 items-center justify-center justify-self-center rounded-md border border-neutral-300 bg-white text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><circle cx="5" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
      </button>
      <button type="button" disabled className="inline-flex h-11 cursor-not-allowed items-center justify-center rounded-md bg-neutral-100 px-5 text-sm font-medium text-neutral-600">Unavailable action</button>
      <button type="button" disabled aria-busy="true" className="inline-flex h-11 cursor-wait items-center justify-center gap-2 rounded-md bg-neutral-900 px-5 text-sm font-medium text-white">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="size-5 animate-spin"><path d="M12 3a9 9 0 1 1-9 9" /></svg>
        Loading action
      </button>
    </div>
  )
}

Pattern notes

When to use: Use to choose action emphasis and document native disabled or loading states. Pick buttons-stacked-full-width for a card with one recommended action, or buttons-toolbar for frequent icon actions. Variations: place the icon-only action beside a text button, pair primary and secondary actions, or move the destructive action into a separate confirmation area.
Hierarchy: Filled neutral-900 with white text marks the primary action; a neutral-300 outline marks the secondary; underlined text marks the tertiary. The destructive action uses a trash icon and explicit Delete wording. Disabled and loading examples follow the active actions. Use 2–3 words per action label; the icon-only button has a More actions accessible label.
Responsive: Below 640px all seven controls stack in a 288px-wide column, with the icon-only control centred. At 640px they form three columns in a 576px-wide grid. Labels and icon sizes stay the same.
Layout: A 288px-wide (w-72) grid with 12px gaps, stepping to 576px and three equal columns at 640px. Buttons are 44px high with 20px horizontal padding and 6px radii. The icon-only control is a centred 44px square. The destructive and loading controls have a 20px icon with an 8px gap. The mobile stack is 380px tall.
States: Primary hover changes to neutral-700; outlined controls fill neutral-50; tertiary hover changes to neutral-600. Enabled buttons show a 2px neutral-900 keyboard-focus outline offset 2px. Unavailable action is disabled with neutral-100 fill, neutral-600 text and a not-allowed cursor. Loading action is disabled and aria-busy, with a 1s linear animate-spin stroke icon and a wait cursor.

Desktop wireframe

┌────────────────────────────────────────────────────────┐
│ [Primary action] [Secondary action] [Tertiary action]  │
│ [Trash icon  Delete item]  [...]  [Unavailable action] │
│ [Spinner  Loading action]                              │
└────────────────────────────────────────────────────────┘

View all

Buttons — Bulk selection bar
Layout tags: row,split,numbers,compact
Buttons — Command tiles with descriptions
Layout tags: grid,icons,compact
Buttons — Confirmation footer
Layout tags: stacked,split,compact

Buttons — Primary, secondary and tertiary

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Confirmation footer