Dialog
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