Alert Dialog

A modal dialog that interrupts the user to confirm a destructive or important action. Requires explicit acknowledgment before proceeding.

Confirmation Dialog

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently
        delete your account and remove your data.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Yes, delete account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the alert dialog.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.

Accessibility

Built on Radix primitives, so focus is trapped inside the alert dialog while open and restored to the trigger on close. Unlike regular Dialog, Escape does not dismiss — the user must choose Cancel or Action explicitly, which is appropriate for destructive confirmations.

Every alert dialog must have an AlertDialogTitle and should include an AlertDialogDescription that explains the consequences of the action. The description is wired up via aria-describedby automatically.