Overlays & feedback
Confirm dialog
The focused “are you sure?” for actions you can’t take back — delete, discard, publish. A scrim, an icon that signals consequence, a clear question, and two buttons where the confirm carries the tone.
npx shadcn@latest add @orbit/confirm-dialogTones
Live — danger, warning, and primary tint the icon and the confirm button, so the weight of the action reads before you read the words. Open one, then dismiss with Cancel, the scrim, or Escape; after confirming, a brief acknowledgement closes the loop.
Anatomy
A confirm dialog interrupts on purpose, so keep it to one clear question and two unambiguous choices. The 42px tinted icon signals consequence, the title asks the question, the message spells out exactly what’s affected and whether it’s reversible, and the footer sits on a muted strip with Cancel always one obvious move away.
Controlled
Omit trigger and drive open yourself to confirm actions that start elsewhere — a row’s delete button, a menu item, a keyboard shortcut.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "danger" | "warning" | "primary" | "danger" | Colors the icon and the confirm button by consequence. |
| title | ReactNode | — | The question — “Delete this task?”. Required. |
| message | ReactNode | — | The consequence — what’s affected and whether it’s reversible. Required. |
| confirmLabel | string | "Confirm" | Confirm button label. Name the action, not “OK”. |
| cancelLabel | string | "Cancel" | Cancel button label. |
| onConfirm | () => void | — | Called when the confirm button is pressed, right before the dialog closes. |
| onCancel | () => void | — | Called when the dialog is dismissed via Cancel, the scrim, or Escape. |
| trigger | ReactElement | — | Element that opens the dialog — usually a Button. Omit when controlling open. |
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called when the dialog opens or closes. |
| className | string | — | Extra classes for the dialog card. Raw parts are exported as ConfirmDialogPrimitive. |
Usage
Reserve it for consequential, irreversible, or hard-to-undo actions. For routine saves don’t interrupt; for a dismissible side task use a Drawer or Modal.
Name the action on the button
“Delete task”, not “OK”. A specific verb lets people confirm by reading just the button.
Confirm everything
Overuse trains people to click through. Reserve it for the irreversible; make routine actions undoable instead.
State what’s affected
Spell out the scope — “and its 2 subtasks” — so there are no surprises about what the action touches.
Make destructive the default
Don’t autofocus or color the page so the dangerous choice is the easy one. The safe path should win ties.
Keyboard & accessibility
Built on Base UI AlertDialog: role='alertdialog' with the title and message as the accessible name and description, focus trapped while open and returned to the trigger on close, and page scroll locked.