Alert Dialog

Ask for a decision before something that can’t be undone.

Clicking outside won’t close it. Choose Cancel or press Esc.

Fig. 1 Try deleting. The dialog won’t close from a click outside; it needs an answer.

When to use it

Use Alert Dialog only before destructive or irreversible actions, such as deleting a project. Name the action in the title and on the confirm button.

For anything people can undo, skip the question and offer Undo afterward in a Toast.

Popover

The page stays usable.

Press Esc or click outside to close.

Small changes next to their button.

Dialog

The page waits.

Press Esc to close and return to the trigger.

A focused task with a clear end.

Drawer

The page waits, from the edge.

Swipe toward the edge, click outside, or press Esc to close.

Choices on a phone, details beside a list.

Alert DialogThis page

The page needs an answer.

Clicking outside won’t close it. Choose Cancel or press Esc.

Actions that can’t be undone.

Fig. 2 Four overlays, four jobs. Open each one and notice what stays usable behind it and how it closes.

How it behaves

Base UI traps focus, ignores outside presses, closes with Escape, and returns focus to the trigger. Focus starts on the first button, so place AlertDialogCancel before AlertDialogAction.

Name the consequence in AlertDialogTitle and AlertDialogDescription, and label the action with the verb, such as Delete project.

AlertDialogAction is a Button; control open/onOpenChange to close after the action completes. AlertDialogCancel closes the dialog and defaults to the outline variant.

size="sm" places the buttons side by side. AlertDialogMedia adds an optional icon tile beside the title.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

alert-dialog-example.tsx

The full source is yours to edit once installed:

alert-dialog.tsx