Dialog
Modal dialog with backdrop, focus trapping, and escape-to-close.
Example
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | Required | Controls dialog visibility |
onClose | () => void | — | Required | Called when dialog should close |
closeOnBackdropClick | boolean | true | No | Close when clicking outside |
closeOnEscape | boolean | true | No | Close when pressing Escape |
Accessibility
- role="dialog" with aria-modal="true"
- Focus trap keeps focus within dialog
- Body scroll lock while open
- Returns focus to trigger on close
- Renders via portal to escape stacking contexts
Related Tokens
--dialog-surface--dialog-border--dialog-backdrop