Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Examples
Default
Preview
API
Dialog
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| open | boolean | true, false | - | Controls the open state (controlled). |
| onOpenChange | (open: boolean) => void | - | - | Called when the open state changes. |
| defaultOpen | boolean | true, false | false | The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. |
| modal | boolean | true, false | true | When true, prevents interaction with elements behind the dialog. |
| …props | All Radix Dialog.Root props | - | - | All native properties of the Radix UI Dialog Root component. |
DialogTrigger
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| asChild | boolean | true, false | false | When true, uses the child as the trigger. |
| …props | All Radix Dialog.Trigger props | - | - | All native properties of the Radix UI Dialog Trigger component. |
DialogContainer
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply to the dialog container. |
| overlayClassName | string | - | - | Additional CSS classes to apply to the dialog overlay (backdrop). |
| showCloseButton | boolean | true, false | true | When true, displays a close button in the top-right corner. |
| …props | All Radix Dialog.Content props | - | - | All native properties of the Radix UI Dialog Content component. |
DialogContent
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply. |
| …props | All native div props | - | - | All native properties of a div element. This component is used for the main scrollable content area of the dialog. |
DialogHeader
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply. |
| separator | boolean | true, false | false | When true, displays a separator line below the header spanning the full width of the dialog. |
| …props | All native div props | - | - | All native properties of a div element. |
DialogFooter
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply. |
| separator | boolean | true, false | false | When true, displays a separator line above the footer spanning the full width of the dialog. |
| …props | All native div props | - | - | All native properties of a div element. |
DialogTitle
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply. |
| …props | All Radix Dialog.Title props | - | - | All native properties of the Radix UI Dialog Title component. |
DialogDescription
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply. |
| …props | All Radix Dialog.Description props | - | - | All native properties of the Radix UI Dialog Description component. |
DialogClose
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| asChild | boolean | true, false | false | When true, uses the child as the close trigger. |
| …props | All Radix Dialog.Close props | - | - | All native properties of the Radix UI Dialog Close component. |
Last updated on