shadcn.io is an independent project built on shadcn/ui
The title is Delete Item. The trigger and the Delete action are both destructive. The text says the item would be permanently deleted. The item stays.
Use the destructive color only when the delete cannot be undone. Say delete, not archive, if you mean delete. Archive can be a normal Dialog. In Vue, Ark UI does not remove the item.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<Button variant="destructive">Delete</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Item?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the item from your account.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogClose :asChild="true">
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
</AlertDialogClose>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>FAQ
Why the destructive color?
It's widely read as danger and makes people pause. Use variant="destructive" only for irreversible actions so the signal keeps its meaning.
Should reversible actions use it too?
No. For archive, hide or disable, use a normal confirmation with the default or outline buttons.
Does the trigger need to be destructive too?
It tells people the feature is dangerous before the dialog opens. For lower-stakes deletions an outline trigger with a destructive action works.
How should I word a delete confirmation?
Be specific and plain: This action cannot be undone, and name what is deleted. Don't say remove or archive if you mean delete.
API Reference
Alert Dialog
Sets asChild and variant="destructive". The rest is on the Alert Dialog page.
Button
Sets variant="destructive". The rest is on the Button page.
