Dialog
Before taking action, please confirm.
Features
- Supports modal and non-modal modes.
- Focus is automatically trapped when modal.
- Can be controlled or uncontrolled.
- Manages screen reader announcements with Title and Description components.
- Esc closes the component automatically.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
defaultOpen | boolean | false |
modal | boolean | true |
open | boolean | undefined |
| Event | Type |
|---|---|
update:open | [_value: boolean] |
Trigger
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Portal
| Props | Type | Default |
|---|---|---|
disabled | boolean | false |
forceMount | boolean | false |
to | string | HTMLElement | body |
Overlay
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
forceMount | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Content
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
disableOutsidePointerEvents | boolean | false |
forceMount | boolean | false |
isDismissable | boolean | true |
trapFocus | boolean | false |
| Event | Type |
|---|---|
closeAutoFocus | [_event: Event] |
escapeKeyDown | [_event: KeyboardEvent] |
focusOutside | [_event: FocusOutsideEvent] |
interactOutside | [_event: PointerDownOutsideEvent | FocusOutsideEvent] |
openAutoFocus | [_event: Event] |
pointerDownOutside | [_event: PointerDownOutsideEvent] |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Title
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | h2 |
asChild | boolean | false |
Description
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | p |
asChild | boolean | false |
Close
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |