About the shadcn/ui Alert Dialog Component
The Alert Dialog component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add alert-dialog` and copy it directly into your project.
Alert Dialog Component — Frequently Asked Questions
How do I use shadcn AlertDialog for delete confirmation?
Put the delete trigger in `<AlertDialogTrigger>` and call the delete function in `<AlertDialogAction onClick={handleDelete}>`. Use the destructive variant for the action button.
How is shadcn AlertDialog different from Dialog?
AlertDialog is specifically for confirmation prompts — it requires the user to explicitly choose an action. It prevents closing by clicking outside, which Dialog allows.
How do I make the AlertDialog action button show a loading state?
Replace `<AlertDialogAction>` with a Button using `asChild` prop, then manage a loading state: `<AlertDialogAction asChild><Button loading={isDeleting}>Delete</Button></AlertDialogAction>`.