shadcn.io is an independent project built on shadcn/ui
A database icon sits in the title Clear All Data. The badge under it reads Permanent Action. The text lists preferences, cache, and local storage. The button does not clear anything.
Use the badge when the title might sound routine. Do not badge every confirm. Show the scope on a Button before this opens. In Solid, Ark UI does not erase the stored data.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger asChild={props => <Button {...props()} variant="destructive">Clear Data</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle class="flex items-center gap-2">
<DatabaseIcon aria-hidden="true" class="size-5" />
Clear All Data
</AlertDialogTitle>
<Badge pill variant="destructive">
Permanent Action
</Badge>
<AlertDialogDescription>
This will permanently delete all stored data including user
preferences, cache, and local storage. This cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogClose asChild={props => <AlertDialogAction {...props()} variant="destructive">
Clear All Data
</AlertDialogAction>} />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>FAQ
Why put the badge between the title and the description?
The title says what, the badge says how serious, and the description explains. Placed there, it's read before the details and in that order by screen readers.
What should the badge say?
Two or three direct words: Permanent Action, Cannot Be Undone. Generic words like Caution don't say what's special about the action.
How is the badge styled?
It's a Badge with variant="destructive" and pill, so it follows the theme's destructive color with no extra classes.
When does a badge add something a red button doesn't?
When the action is more than destructive: permanent, immediate, or affecting a lot of data. A routine file deletion doesn't need one.
API Reference
Alert Dialog
Sets asChild, props and variant="destructive". The rest is on the Alert Dialog page.
Button
Sets props and variant="destructive". The rest is on the Button page.
Badge
Sets pill and variant="destructive". The rest is on the Badge page.
