AlertDialog
Confirmation dialog requiring explicit user action; no light-dismiss
Category: overlay · WCAG 2.2-AA · overlay, dialog, confirm, destructive
Variants
- default
- destructive
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Whether the component is open (controlled). |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
onConfirm | () => void | — | Called when the confirm button is activated. |
onCancel | () => void | — | Called when the cancel button is activated. |
labels | AlertDialogLabels | — | Overrides for the component’s user-visible strings (i18n). |
variant | 'destructive' | 'default' | default | Selects the visual style variant. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-lg--cascivo-shadow-xl--cascivo-motion-enter--cascivo-motion-exit--cascivo-color-accent--cascivo-color-destructive
When to use
- Confirming a destructive or irreversible action (delete, overwrite, sign out) before it happens
- Interrupting a flow to force an explicit decision the user must acknowledge
When not to use
- Showing non-critical information or forms — use Modal, which supports light-dismiss and arbitrary content
- Confirming a low-stakes action where an undoable Toast is friendlier and less interruptive
How to build an accessible AlertDialog in React →
Examples
Destructive confirm
<AlertDialog
open={isOpen}
variant="destructive"
title="Delete project?"
description="This permanently removes the project and cannot be undone."
onConfirm={remove}
onCancel={() => setIsOpen(false)}
/>Custom action labels
<AlertDialog
open={isOpen}
title="Sign out?"
description="Unsaved changes will be lost."
labels={{ confirm: 'Sign out', cancel: 'Stay' }}
onConfirm={signOut}
onCancel={() => setIsOpen(false)}
/>