Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. Customize the dialog with variants and transition.
Examples
Basic Dialog
Controlled Dialog
You can control the open state of the dialog using the open and onOpenChange props.
Dialog with custom variants and transition
Dialog with custom exit animation
You can customize the exit animation by providing a custom exit variant.
Dialog with custom backdrop
You can customize the backdrop using the backdrop: prefix on DialogContent, e.g., backdrop:bg-white/20.
Installation
npx motion-primitives@latest add dialog
Component API
Dialog
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Children to be rendered within the dialog. |
| variants | Variants | Variants for controlling the animation states with specific properties for initial, animate, and exit states. | |
| transition | Transition | Transition settings from framer-motion for animation effects. | |
| className | string | Optional CSS class for styling the dialog container. | |
| defaultOpen | boolean | false | If true, the dialog will be open by default. |
| onOpenChange | (open: boolean) => void | Callback function that is called when the dialog's open state changes. | |
| open | boolean | Controlled open state of the dialog. |
DialogTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | The content to be rendered inside the trigger button. |
| className | string | Optional CSS class for styling the trigger button. |
DialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | The content to be rendered inside the dialog. |
| className | string | Optional CSS class for styling the dialog content. | |
| container | HTMLElement | document.body | Specify a container element to portal the content into. |
DialogHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | The content to be rendered inside the dialog header. |
| className | string | Optional CSS class for styling the dialog header. |
DialogTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | The title content to be rendered inside the dialog. |
| className | string | Optional CSS class for styling the dialog title. |
DialogDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | The description content to be rendered inside the dialog. |
| className | string | Optional CSS class for styling the dialog description. |
DialogClose
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Optional CSS class for styling the close button. | |
| children | ReactNode | Optional content to be rendered inside the close button. If not provided, a default close icon will be used. | |
| disabled | boolean | If true, the close button will be disabled. |