Center modal with scrim, focus trap, Escape to close, and scroll lock.
Install with the CLI, or copy the component source into your project.
Trigger, title, body, and footer close action.
Center modal with scrim, focus trap, Escape to close, and body scroll lock. Use for instructional or confirmational content that should interrupt the page.
| Prop | Type | Default | Notes |
|---|---|---|---|
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called when open state should change. |
| children | ReactNode | - | Compose with DialogTrigger, DialogContent, and the header, body, and footer parts. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | - | Optional host element. Merge trigger props onto a kit Button or other control. |
| children | ReactNode | - | Trigger label when rendering the default button. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| className | string | - | Classes on the dialog panel. |
| children | ReactNode | - | Panel contents. Prefer DialogHeader, DialogBody, and DialogFooter. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| showClose | boolean | true | Show the trailing close control in the header. |
| children | ReactNode | - | Usually DialogTitle and DialogDescription. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Accessible dialog title. Wired to aria-labelledby. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Supporting copy under the title. Wired to aria-describedby. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Scrollable main content. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | - | Optional host element. Merge close props onto a kit Button. |
| children | ReactNode | - | Close control label when rendering the default button. |