Components

Alert Dialog

A modal dialog that interrupts the user with important content and expects an explicit confirm-or-cancel response before proceeding.

Basic usage

Wrap a trigger and content. Radix manages the open state, focus trap, and dismissal for you.

For irreversible actions, open from a destructive button and restyle AlertDialogAction to reinforce the consequence.

Prop	Type	Default	Description
`open`	boolean	`—`	Controlled open state of the dialog. Omit to let Radix manage it internally.
`defaultOpen`	boolean	`false`	Open state when initially rendered, for uncontrolled usage.
`onOpenChange`	(open: boolean) => void	`—`	Called when the open state changes (trigger, cancel, action, or Escape).
`AlertDialogTrigger`	ReactNode	`—`	The control that opens the dialog. Use asChild to render your own Button.
`AlertDialogContent`	ReactNode	`—`	The modal panel. Renders in a portal with an overlay; must contain a Title.
`AlertDialogAction`	ReactNode	`—`	Confirming button styled with the default button variant; closes the dialog on click.
`AlertDialogCancel`	ReactNode	`—`	Dismissing button styled as outline; receives initial focus and closes the dialog.
`className`	string	`—`	Additional Tailwind classes merged onto any sub-component.

Built on Radix Alert Dialog: the content is rendered with role="alertdialog" and focus is trapped inside while open.
AlertDialogTitle and AlertDialogDescription are wired to aria-labelledby and aria-describedby automatically — always include a Title.
Unlike a regular dialog, it does not close on overlay click or Escape-to-dismiss-only flows; Escape triggers Cancel so the user makes a deliberate choice.
The Cancel button receives initial focus, and focus returns to the trigger when the dialog closes.