Alert Dialog

A modal dialog that interrupts the user and expects a response. Use for destructive or irreversible actions.

Installation

bash
npx shadcn@latest add alert-dialog

Import

import {  AlertDialog,  AlertDialogTrigger,  AlertDialogContent,  AlertDialogHeader,  AlertDialogFooter,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogAction,  AlertDialogCancel,} from "@/components/ui/alert-dialog"

Confirm delete

<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 all your data from our servers.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>Cancel</AlertDialogCancel>      <AlertDialogAction>Continue</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Props

PROPTYPEDEFAULTDESCRIPTION
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Called when open state changes

AlertDialogAction renders the confirm button (styled as default Button).AlertDialogCancel renders the cancel button (styled as outline Button).

Alert vs AlertDialog

Alert is a static callout (non-interactive, purely visual).AlertDialog is a blocking modal requiring user action.