Alert Dialog

A modal dialog that interrupts the user with important content and expects a response, built on Radix UI's Alert Dialog primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/alert-dialog.json

Installing alert-dialog also installs the atomx button component as a registry dependency, since AlertDialogAction and AlertDialogCancel are styled with its buttonVariants.

Usage

Alert Dialog interrupts the user and blocks the rest of the UI until they respond — use it for destructive or irreversible confirmations such as deleting an account or discarding unsaved changes. For non-blocking messages that do not need a response, use Alert instead.

AlertDialogAction confirms and AlertDialogCancel dismisses; both close the dialog. Wrap a custom trigger element with AlertDialogTrigger asChild.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Preview

Open the dialog, then choose Cancel or Continue — both dismiss it.

Exports