Modal
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Anatomy
Import all parts and piece them together.
API Reference
Root
Composes every part, manages the open state (controlled or uncontrolled), and wires accessibility ids.
| Prop | Type | Default |
|---|---|---|
| open | boolean | undefined |
| defaultOpen | boolean | false |
| onOpenChange | function | - |
| isOpen | boolean | - |
| onClose | function | - |
| closeOnEscape | boolean | true |
| closeOnOverlay | boolean | true |
| container | HTMLElement | null | document.body | null |
| disableLockScroll | boolean | false |
| unmountDelay | number | 220 |
| id | string | undefined | undefined |
Trigger
Button that toggles the modal and receives aria/data attributes automatically.
| Prop | Type | Default |
|---|---|---|
| type | "button" | "submit" | "reset" | button |
| disabled | boolean | - |
| onClick | React.MouseEventHandler<HTMLButtonElement> | - |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | "" |
Portal
When used, portals your overlay and content parts into the body.
| Prop | Type | Default |
|---|---|---|
| container | HTMLElement | null | Inherited from Root |
| forceMount | boolean | false |
Overlay
A layer that covers the inert portion of the view when the modal is open.
| Prop | Type | Default |
|---|---|---|
| forceMount | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
Content
Contains content to be rendered in the open modal.
| Prop | Type | Default |
|---|---|---|
| forceMount | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
Title
An accessible title to be announced when the modal is opened.
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | - |
Description
An accessible description to be announced when the modal is opened.
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | - |
Close
The button that closes the modal.
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | - |