videorc/uiAlert Dialog
The question before something destructive, on the dialog tier. No close button, Cancel has focus on open, and Escape is the safe answer.
Installation
$ pnpm dlx shadcn@latest add @videorc/alert-dialogUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";<AlertDialog onOpenChange={setOpen} open={open}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete saved scene?</AlertDialogTitle>
<AlertDialogDescription>
Only the saved snapshot is deleted. Your current scene and recording
continue.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={deleteScene} variant="destructive">
Delete scene
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>The title is "Verb object?", and one sentence names exactly what is lost. The safe answer ("Cancel", or "Keep …") is a ghost button; the destructive one reads verb and object. A consequential step that destroys nothing, such as a replace, keeps variant="default".
Anatomy
<AlertDialog>
<AlertDialogTrigger />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle />
<AlertDialogDescription />
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel />
<AlertDialogAction />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Examples
Pending action
AlertDialogAction doesn't close the dialog: the owner drops open once the action is done. While async work runs, the dialog stays up and says so ("Deleting…"), and the answers are disabled.
Theming
| Token or attribute | Meaning |
|---|---|
dialogContentVariants({ size }) | The same surface, widths and height rule as Dialog |
data-size | sm, md (the default), lg or xl |
bg-black/30 | The overlay, with no backdrop blur |
Keyboard
| Key | Action |
|---|---|
Escape | Closes the dialog: the same answer as Cancel |
Tab, Shift+Tab | Moves between the answers; focus stays inside |
Enter, Space | Presses the focused answer |
Accessibility
The dialog is an alertdialog, named by its title and described by its description. Cancel has focus on open, even when the body holds a control before it, so a stray Enter or Space never destroys anything. A click outside doesn't close it.
API reference
Every Base UI Alert Dialog prop, plus:
AlertDialogContent
Prop
Type
AlertDialogAction
A Button that doesn't close the dialog.
Prop
Type
AlertDialogCancel
Prop
Type
Dialog
A modal on the dialog tier of the float glass in four widths, with a body that scrolls between a header and a footer that stay put, and no backdrop blur.
Command
A searchable list on cmdk at the ⌘K palette scale, with a borderless 18 px search field, 40 px rows and a footer. It paints no coat; the dialog or popover around it does.