A React alert dialog for destructive confirmations, with a Liquid Glass surface and clear cancel and confirm actions.
AlertDialog is an accessible modal confirmation component. It renders the portal, backdrop, centered popup, title, description, optional body, and fixed cancel and confirm actions internally.
The basic example uses controlled mode: open controls visibility and the page renders its own trigger button. It is modal and the backdrop cannot dismiss it, but Escape still closes it without calling onCancel or onConfirm. Guard destructive flows in onOpenChange when Escape must not cancel them.
open and onOpenChange control the dialog. Render your own button and set open to true to show it; onConfirm and onCancel handle action side effects.
No changes published.
children adds content between the description and the action buttons.
AlertDialog renders a modal alertdialog named by title and described by description. Focus moves into the popup, stays trapped while it is open, and returns to the trigger when it closes.
Escape closes the dialog without calling onCancel or onConfirm; guard the flow in onOpenChange when Escape must not dismiss it. The backdrop never closes an alert dialog, so keep the cancel action visible. See the accessibility guide for overlay focus rules.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Dialog heading. Required. |
description | ReactNode | — | Supporting copy under the title. |
children | ReactNode | — | Extra content between the description and the action buttons. |
cancelLabel | ReactNode | "Cancel" | Cancel button label. |
confirmLabel | ReactNode | "Confirm" | Confirm button label. |
onCancel | MouseEventHandler<HTMLButtonElement> | — | Called when the cancel button is pressed. |
onConfirm | MouseEventHandler<HTMLButtonElement> | — | Called when the confirm button is pressed. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open: boolean, details) => void | — | Called when the dialog opens or closes. |
onOpenChangeComplete | (open: boolean) => void | — | Called after the open or close animation finishes. |
actionsRef | RefObject<Actions | null> | — | Imperative close and unmount actions. |
handle | AlertDialogHandle | — | Associates the dialog with external triggers. |
triggerId | string | null | — | ID of the trigger associated with the dialog. |
defaultTriggerId | string | null | — | ID of the trigger used for an initially open dialog. |
className | string | — | Tailwind classes merged into the popup. |
style | CSSProperties | — | Inline styles merged into the same element as className. |
ui | { backdrop?: ClassValue; viewport?: ClassValue; popup?: ClassValue; glass?: ClassValue; overlay?: ClassValue; content?: ClassValue; title?: ClassValue; description?: ClassValue; body?: ClassValue; footer?: ClassValue } | — | Tailwind classes for internal slots, keyed by data-slot. |
| Attribute | Description |
|---|---|
data-open | Present when the dialog is open. |
data-closed | Present when the dialog is closed. |
data-starting-style | Present when the dialog begins animating in. |
data-ending-style | Present when the dialog is animating out. |
data-nested | Present when the dialog is nested within another dialog. |
data-nested-dialog-open | Present when another dialog is open inside this one. |
data-slot | Marks internal parts (backdrop, viewport, popup, glass, overlay, content, title, description, body, footer) for styling. |
The component uses the shared glass material. Tune shared --ui-glass-* tokens on a parent, use className for layout, and use ui for internal slots keyed by data-slot. Component-specific values live in src/theme/alert-dialog.ts. See the theming guide for token layers and presets.