overlay · @awesome-ds/react
AlertDialog
Destructive confirmation dialog variant.
State matrix
open
closed
Anatomy
- modal overlay
- alertdialog
- consequence
- confirm action
- cancel action
- error alert
Keyboard contract
Focus is contained; Escape cancels unless confirmation is pending; actions lock during pending work.
Screen-reader contract
role=alertdialog announces the title, consequence, pending state, and rejected confirmation error.
Content rules
- Name the irreversible consequence.
- Use explicit confirm and safe cancel labels.
Public API
| Prop | Type | required | Description |
|---|---|---|---|
open | boolean | required | Controlled visibility |
onClose | () => void | required | Cancellation callback |
onConfirm | () => void | Promise<void> | required | Destructive operation |
title | string | required | Accessible title |
children | ReactNode | required | Consequence and recovery copy |
confirming | boolean | — | Externally controlled pending state |
confirmLabel | string | — | Localized confirmation label |
confirmingLabel | string | — | Localized pending label |
cancelLabel | string | — | Localized cancellation label |
confirmationErrorLabel | string | — | Localized failure announcement |
Adaptation contracts
- RTL
- Use logical action alignment and preserve the safe primary/cancel reading order.
- High contrast
- Separate overlay, surface, focus, and actions with system-color boundaries.
- Reduced motion
- Open and close instantly or with opacity only; focus timing remains deterministic.
Verification IDs
Live
Live
Copyable example
import { AlertDialog } from "@awesome-ds/react";
<AlertDialog open title="Delete" onClose={cancel} onConfirm={remove}>Sure?</AlertDialog>