Overlay
Alert Dialog
A confirmation dialog for actions you cannot undo. It carries role="alertdialog", keeps focus inside, and stays open on a backdrop click so the user picks confirm or cancel. Escape closes it.
ReactVueWeb Components
View in Storybook Playground
Examples
<AlertDialog
open={open}
onClose={close}
title="Delete item?"
status="danger"
actions={
<>
<Button variant="ghost" onClick={close}>Cancel</Button>
<Button status="danger" onClick={confirmDelete}>Delete</Button>
</>
}
>
This action cannot be undone.
</AlertDialog>Props
| Name | Type | Default | Description |
|---|---|---|---|
open required | boolean | — | Whether the dialog is open. |
onClose required | () => void | — | Called when the dialog requests to close (Escape key or cancel action). Overlay clicks do NOT close the dialog — an explicit action is required. |
title required | ReactNode | — | Dialog title, announced as the accessible name. |
children required | ReactNode | — | Description / body content, announced as the accessible description. |
actions | ReactNode | — | Action buttons (e.g. a confirm button and a cancel button). Rendered in the footer in the order provided. |
status | AlertDialogStatus | primary | Semantic intent — tints the icon area. @default 'primary' |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.