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. |