Buttons — Confirmation footer

A short decision summary leads to a divided footer with Cancel and Confirm on opposite sides. Use when an action needs a final explanation before confirmation.

ReactHTML

1440 × 480

Open in new tab

Component.tsx8 lines

export default function ButtonsConfirmationFooter() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white text-neutral-900 sm:w-96"><div className="p-5"><h2 className="text-base font-semibold">Decision heading</h2>
    <p className="mt-2 text-sm text-pretty text-neutral-600">Explain what this action changes and who it affects.</p></div>
    <div className="flex items-center justify-between gap-3 border-t border-neutral-200 bg-neutral-50 p-4"><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 " type="button" >Cancel</button>
    <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 " type="button" >Confirm</button></div></div>
  )
}

Pattern notes

When to use: Use before a consequential change that needs a brief explanation. Choose a stacked action group when there are several equal alternatives. Variations: change the confirmation verb, add an item name to the heading, or shorten the body to one sentence.
Hierarchy: Read the heading, the consequence and the two actions. Keep the heading under 4 words, explanation under 14 words and each action under 2 words. Confirm has primary emphasis; Cancel stays at the opposite edge.
Responsive: Below 640px the card is 288px wide. From 640px it becomes 384px. The two actions remain in one row and the short explanation wraps naturally.
Layout: A 288px (w-72) bordered card grows to 384px (sm:w-96). Its summary uses 20px padding, a 16px heading and an 8px copy gap. A neutral-50 footer has a top divider, 16px padding and a justified pair of standard 44px actions.
States: Both buttons show a 2px focus outline offset 2px. Cancel hovers neutral-50 and Confirm neutral-700. The buttons are action slots; there are no selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Decision heading                                     │
│ Explain the consequence of this action.              │
├──────────────────────────────────────────────────────┤
│ [Cancel]                              [Confirm]      │
└──────────────────────────────────────────────────────┘

View all

Buttons — Bulk selection bar
Layout tags: row,split,numbers,compact
Buttons — Command tiles with descriptions
Layout tags: grid,icons,compact
Buttons — Icon toolbar with primary action
Layout tags: row,icons,compact

Buttons — Confirmation footer

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Icon toolbar with primary action