Surfaces
Alert Dialog
Modal dialog for confirming critical actions with focus trap and keyboard navigation.
Overview
The Alert Dialog intercepts user workflows when critical or irreversible actions require explicit confirmation. Built on Reka UI's dialog primitive, it implements proper ARIA attributes including role="alertdialog" with labelledby and describedby associations. The component supports multiple concurrent dialogs managed through a global store stack, allowing complex confirmation workflows. Configurable dismiss behaviors (Escape key, overlay click) can be disabled during async operations when the loading state prevents premature closure, ensuring data integrity during server communications.
Key Business & UX Benefits
- Reduces accidental destructive actions by requiring explicit confirmation.
- Keeps focus and keyboard use inside the dialog for accessible flows.
- Loading state on confirm prevents double-submit and premature close.
- Stackable dialogs support multi-step or nested confirmations.
Pro-Tip from Larry: Use the loading state on confirm so users can’t close the dialog during async actions.
Usage
AlertDialog
Feature List
- Neutral, success, warning, and danger styling variants
- Focus trap and keyboard navigation support
- Loading state on confirm button for async operations
- Stackable dialogs with global state management
API Reference
AlertDialog
| Prop | Default | Type |
|---|---|---|
titlerequired | string | |
id | string | |
titleColor | string | |
description | string | |
descriptionColor | string | |
isOpen | false | boolean |
component | Component | |
props | Record<string, any> | |
buttons | Button[] { text, iconLeft, iconRight, 9 more } | |
cancelButton | Button { text, iconLeft, iconRight, 9 more } | |
closeOnEsc | true | boolean |
closeOnOverlayClick | true | boolean |
mobileButtonsAlignment | right | "left" | "right" | "center" | "space-between" |
desktopButtonsAlignment | right | "left" | "right" | "center" | "space-between" |
| Slot | Type |
|---|---|
default | {} |
| Event | Type |
|---|---|
close | (event: "close"): void |
update:isOpen | (event: "update:isOpen", value: boolean): void |