Simple Confirmation Dialog Alert Dialog for React

Use an Alert Dialog for a decision the reader must make, like confirming a deletion. Use a Dialog for forms and content people may close at any time.

Escape closes it. A click outside doesn't, so the reader has to pick Cancel or Continue.

AlertDialogCancel is the safe choice, styled as an outline button, and always closes the dialog. AlertDialogAction is the primary button that runs the operation. Keep Cancel first and the action last.

Control the dialog's open state, give the action an isLoading state while the request runs, and close the dialog when it settles. Actions with Loading State shows the pattern.

Yes. The dialog has role="alertdialog", traps focus while open, is labelled by its title and description, and returns focus to the trigger when it closes.

Yes. AlertDialogAction takes the button variant: destructive for deletions, the default for normal confirmations. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.