Overlays

AlertDialog

No consumers

Confirm something destructive or irreversible before it happens.

Importimport { AlertDialog } from "@/components/ui/AlertDialog";
Sourcesrc/components/ui/AlertDialog

For destructive or irreversible actions only. The value of a separate component is that it is hard to dismiss by accident and that its action button is explicit — if you are using it for an ordinary form, it should be a Dialog.

Default

Name the action in the button rather than saying “OK”. A reader who has skimmed the text should still be able to tell what the button will do.

Props

AlertDialog

PropTypeDefaultDescription
openboolean—Controlled open state.
defaultOpenboolean—Uncontrolled initial state.
onOpenChange(open: boolean) => void—Called whenever it opens or closes.

AlertDialogAction

PropTypeDefaultDescription
…ButtonPropsButtonPropsvariant="primary"A Button. Pass `variant="danger"` for the destructive case.