Alert Dialog
Confirmation modal.
Usage
Use this when the user must decide before continuing and one outcome is destructive. Title is not optional — Bits points the dialog's aria-labelledby at it, so leaving it out ships a dialog with no accessible
name.
Action does not close
Cancel closes the dialog. Action does not. This is deliberate, and it is the one thing people get wrong here.
The reason is that your destructive operation is usually async and can fail. If Action closed the dialog for you, a failed delete would leave the user staring at a dismissed dialog with no idea whether it worked. So closing is yours to decide: close after it succeeds, or keep it open and show the error.
Close on success, stay open on failure — that is why the primitive leaves it to you.
Alert Dialog vs Dialog
The differences are behavioural, not decorative — which is why you cannot get here by styling a Dialog differently:
role="alertdialog", so it is announced as an interruption.- Clicking the backdrop does not dismiss it. Bits omits
onInteractOutsideon Content, so a stray click cannot resolve a destructive choice. - Cancel takes initial focus, so pressing Enter never destroys anything.
If nothing is being destroyed and the user can just walk away, you want Dialog. Reaching for Alert Dialog for ordinary content trains people to dismiss warnings without reading them.
Writing the copy
The component is the easy part. Label the buttons with the verb, not OK and Cancel — "Delete project" and "Keep project"
tell the user what each button does without re-reading anything. And put the consequence in the
description: what disappears, and whether it can be undone. "Are you sure?" is not a description;
it just moves the question back to the user.
Props
AlertDialog.Root and Trigger are re-exported from
Bits unchanged, so their props are forwarded rather than redeclared.
AlertDialog.Root
| Prop | Type | Default |
|---|---|---|
open Bindable open state. | boolean | false |
onOpenChange Called when the dialog opens or closes. | (open: boolean) => void | — |
AlertDialog.Content
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the panel. | string | — |
AlertDialog.Action
| Prop | Type | Default |
|---|---|---|
color Tone of the confirming button. `danger` is the default because an alert dialog usually guards a destructive action. | 'danger' | 'primary' | 'danger' |
class Extra classes merged onto the button. | string | — |
Title, Description, Cancel and Overlay each take class plus their native attributes.