shadcn.io is an independent project built on shadcn/ui
The warning icon sits beside the title. The description says unsaved changes will be lost. The buttons are Go Back and Continue. Nothing is discarded.
Use the icon so the risk reads before the sentence. Go Back is clearer than Cancel mid-edit. The form they return to can be a Dialog. In React, Base UI does not drop the unsaved changes.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger render={<Button variant="outline" />}>
Open Dialog
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<div className="flex items-center gap-2">
<CircleAlertIcon aria-hidden="true" className="size-5 text-warning" />
<AlertDialogTitle>Confirm Changes</AlertDialogTitle>
</div>
<AlertDialogDescription>
You have unsaved changes. Are you sure you want to continue? Your
changes will be lost.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Go Back</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>FAQ
Which color should the icon use?
Match the message: text-warning for caution as here, text-destructive for destructive actions, text-success for success and text-info for information. These theme tokens adapt to dark mode on their own.
Should the icon go before or after the title?
Before it, in a flex items-center gap-2 row, so it's seen first. Put it above the title, centered, for a more dramatic dialog, as in Confirmation with Centered Icon.
What size works beside the title?
size-5 sits well next to the title text. Go to size-6 for a stronger warning; at size-4 the icon reads as decoration.
Do screen readers announce the icon?
No, it's aria-hidden. The title and description carry the message, so never rely on the icon alone to say something the text doesn't.
API Reference
Alert Dialog
No extra props in this demo. The rest is on the Alert Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
