Alert Dialog
A modal that interrupts the user to confirm a destructive or irreversible action.
Install
pnpm dlx shadcn@latest add @namche/alert-dialogUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
<AlertDialog>
<AlertDialogTrigger render={<Button variant="destructive">Delete</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Sirdar?</AlertDialogTitle>
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Unlike Dialog, the overlay cannot be dismissed by clicking outside or
pressing Escape — the user must choose AlertDialogAction or
AlertDialogCancel. AlertDialogAction is a plain Button (pass variant
directly), while AlertDialogCancel wraps the primitive's Close and
defaults to variant="outline". AlertDialogContent also accepts
size="sm" for a tighter, two-column footer.