Dialog
Animated modal dialog with title, description, close button, and focus trap. Includes an AlertDialog variant that requires explicit user action.
Installation
npx smoothui-cli add dialogFeatures
Controlled modal with title, description, footer slots, focus trap, and spring entrance. Two variants: a dismissible dialog and an alert dialog that requires an explicit action.
Variants
Dialog
Standard modal — Escape and backdrop click dismiss it. Includes a close button and returns focus to the trigger when closed.
Alert Dialog
Destructive or irreversible actions. Escape is ignored; the user must choose Cancel or Continue. Use for delete confirmations and similar flows.
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
Escape | Closes the dialog (Dialog only — AlertDialog ignores Escape) |
Tab | Cycles focus through focusable elements within the dialog (focus is trapped) |
Shift + Tab | Cycles focus backward through focusable elements within the dialog |
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
role="dialog" | Dialog content | Identifies the element as a dialog |
role="alertdialog" | AlertDialog content | Identifies the element as an alert dialog requiring user action |
aria-labelledby | Dialog/AlertDialog content | References the title for an accessible name |
aria-describedby | Dialog/AlertDialog content | References the description |
aria-modal="true" | Dialog/AlertDialog content | Indicates content behind is inert |
Screen Reader
- Focus moves to the dialog content when opened
- Focus is trapped within the dialog while open
- Focus returns to the previously focused element when the dialog closes
- The title is announced via
aria-labelledby
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, all scale, fade, and zoom animations are disabled instantly.
Props
DialogProps
AlertDialogProps
Created by
Improved by
Powered by
© 2026 SmoothUI. Built by Eduardo Calvo.