Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Demo

Set size="sm" on AlertDialogContent for a compact dialog.

AlertDialogMedia renders an icon or image alongside the header.

Pass variant to AlertDialogAction and AlertDialogCancel for destructive confirmations.

Prop	Type	Default	Description
`size`	`"default" \| "sm"`	`"default"`	Dialog size. sm centers content and stacks the footer in a 2-col grid.

Prop	Type	Default	Description
`variant`	`ButtonVariants["variant"]`	`default / "outline"`	Button style, e.g. destructive.
`size`	`ButtonVariants["size"]`	`"default"`	Button size.

Prop	Type	Default	Description
`class`	`string`	—	Container for an icon or image in the header.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Esc`	Closes the dialog (returns focus to the trigger).
`Tab`	Focus is trapped inside the dialog while open.

Unlike Dialog, clicking outside does not close an alert dialog; the user must choose an action.