Alert dialog
A confirmation that interrupts on purpose, wrapping the Base UI Alert Dialog. Always modal, and a stray click outside never dismisses it: the user answers, or cancels with Escape. For anything that doesn't demand an answer, use the Dialog.
Playground
Flip Destructive to swap the confirm button between primary and danger, then open it and try clicking the backdrop. Confirmations aren't only for deletes; anything hard to undo (publishing, sending, transferring) earns one.
Variants
Neutral and destructive, and the difference is one Button variant on the confirm: primary when the action is merely irreversible, danger when it destroys something.
States
Closed or open, and open is live: click the first trigger. While open the trigger carries data-popup-open and focus stays inside; a disabled trigger comes from disabling the Button you render.
Styling states
The popup and backdrop both carry data-starting-style and data-ending-style during the enter and exit transitions, and the trigger carries data-popup-open while open, so a bigger settle and a dimmed trigger are two rules:
.ub-alert-dialog-popup[data-starting-style] {
scale: 0.9;
}
.ub-alert-dialog-trigger[data-popup-open] {
opacity: 0.6;
}Props
The same shape as the Dialog, minus the escape hatches: it is always modal and outside clicks are always ignored, so neither is a prop. The essentials:
| Prop | Type | Default | Description |
|---|---|---|---|
AlertDialogRoot.open | boolean | – | Controlled state. Pair with onOpenChange (also defaultOpen). |
AlertDialogTrigger.render | ReactElement | – | The real control that opens the alert, usually a Bones Button. |
AlertDialogClose.render | ReactElement | – | One per choice: Cancel as a ghost, the action as primary or danger. |
AlertDialogClose.onClick | () => void | – | Run the confirmed action here; the alert closes after. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
AlertDialogRoot, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, from @usebones/react.
- Structure: AlertDialogRoot wraps AlertDialogTrigger + AlertDialogContent; put AlertDialogTitle + AlertDialogDescription and one AlertDialogClose per choice inside (Cancel ghost and first in the DOM, the action primary or danger with onClick).
- Attach trigger and close buttons to real controls via render={<Button ... />}; disable the trigger by disabling that Button.
- Use it only when the action is hard to undo; it is always modal and outside clicks never dismiss (Escape cancels). Otherwise use Dialog.
- Restyle in CSS via .ub-alert-dialog-popup (26rem max-width default), .ub-alert-dialog-backdrop, .ub-alert-dialog-title, .ub-alert-dialog-description, [data-starting-style]/[data-ending-style] for enter/exit, [data-popup-open] on the trigger. Tokens only.