Components
Dialog
A modal dialog for confirmations, forms, and focused tasks. Includes backdrop, keyboard dismissal, and focus trapping.
Basic usage
Compose with DialogTrigger, DialogContent, DialogHeader, and DialogFooter.
Controlled
Pass open and onOpenChange for full control.
Sizes
With form
Dialog Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
childrenrequired | React.ReactNode | — | Dialog trigger and content. |
DialogContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Max-width of the dialog. |
className | string | — | Additional Tailwind classes. |
Accessibility
- Uses
role="dialog"andaria-modal="true". - Escape key closes the dialog.
- Clicking backdrop closes the dialog.
- Body scroll is locked when open.
- Close button has
aria-label="Close dialog".