Alert Dialog
A modal dialog that interrupts the user with important content and expects a response. Built on Base UI AlertDialog primitive.
Installation
npx shadcn add alert-dialog --registry https://ui.ch.sh/r
Usage
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from "@/components/ui/alert-dialog"
export default function Example() {
return (
<AlertDialog>
<AlertDialogTrigger render={<Button variant="outline" />}>
Open
</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>
)
}