A window overlaid on either the primary window or another dialog window. Perfect for confirmations and forms.
Preview
Installation
Usage
Examples
Basic Dialog
tsx
Dialog with Form
tsx
Confirmation Dialog
tsx
RTL Support Example
The Dialog component is fully RTL-compatible. The close button positions correctly and content aligns naturally.
LTR (English)
RTL (العربية)
Props
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state |
onOpenChange | (open: boolean) => void | undefined | Callback when open state changes |
defaultOpen | boolean | false | Default open state (uncontrolled) |
Accessibility
ARIA Roles
Uses role="dialog" and aria-modal="true".
Keyboard Navigation
- Escape: Closes the dialog
- Tab: Traps focus within dialog
Focus Management
Focus is automatically moved to the dialog when opened and returned to the trigger when closed.
RTL Support
The Dialog component is fully RTL-compatible using logical properties.
Key RTL Features:
- Close button positions on the correct side (end)
- Content aligns naturally (text-start)
- Dialog centered properly in both directions
- Animations work correctly in RTL
Use Cases
Confirmation prompts (delete, discard)
Form overlays for quick edits
Detail views and previews
Critical alerts requiring action
Best Practices
Do
- ✓ Trap focus inside the dialog when open
- ✓ Provide a clear close mechanism (button + Escape key)
- ✓ Use descriptive titles that explain the purpose
- ✓ Return focus to the trigger element on close
Don't
- ✗ Don't nest dialogs inside dialogs
- ✗ Don't use for simple notifications — use Toast instead
- ✗ Don't open dialogs automatically without user action