Buttons — Stacked full-width actions

A compact action card places a full-width primary button above two secondary actions, a tertiary link and guidance. Use it for a focused action group with a clear first choice.

ReactHTML

1440 × 480

Open in new tab

Component.tsx20 lines

export default function ButtonsStackedFullWidth() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white p-5 text-neutral-900 sm:w-80">
      <h2 className="text-base font-semibold">Action group title</h2>
      <p className="mt-1 text-sm text-neutral-500">Short supporting context</p>
      <div className="mt-4 grid gap-2">
        <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>
        <div className="grid grid-cols-2 gap-2">
          <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-4"><path d="M12 5v14M5 12h14" /></svg>Add</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-4"><path d="M12 16V3m-4 4 4-4 4 4M5 12v8h14v-8" /></svg>Export</button>
        </div>
      </div>
      <div className="mt-4 text-center">
        <a href="#" className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Tertiary action</a>
      </div>
      <p className="mt-3 text-center text-xs text-neutral-500">Short action guidance</p>
    </div>
  )
}

Pattern notes

When to use: Use for a compact card or sidebar with one recommended action. Pick buttons-joined-group for related actions sharing borders. Variations: place a confirmation note below the primary, use two export formats for the secondaries, or replace the tertiary link with a help link. Secondary buttons are 44px high.
Hierarchy: The 16px semibold title names the action group in up to four words, followed by one line of 14px context up to five words. Primary action spans the card; Add and Export share secondary emphasis. Tertiary action is underlined. The final note stays one line, up to five words.
Responsive: The single-card structure and two secondary columns remain unchanged at all widths. Below 640px the root is 288px, and from 640px it is 320px. Short secondary labels fit without wrapping at mobile width.
Layout: A 288px-wide (w-72) white card with a 1px neutral-200 border, rounded-lg corners and 20px padding (p-5), widening to 320px (sm:w-80). A title and context precede the full-width primary by 16px. Two equal secondary columns sit 8px below with gap-2. Buttons are 44px high, rounded-md, px-5, text-sm and font-medium; secondary icons are 16px with gap-2. A centred tertiary link follows by 16px, then a 12px caption after 12px.
States: Primary hover changes neutral-900 to neutral-700; secondary hover fills neutral-50; the tertiary link turns neutral-600. All actions use a 2px neutral-900 keyboard-focus outline with a 2px offset. Button colour changes transition in 150ms. No disabled controls.

Desktop wireframe

┌────────────────────────────────────────────┐
│ Action group title                         │
│ Short supporting context                   │
│ [             Primary action             ] │
│ [+ Add item]            [v Download]       │
│                 Tertiary action            │
│             Short action guidance          │
└────────────────────────────────────────────┘

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 — Stacked full-width actions

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Confirmation footer