Skip to Content
DocumentationDialog

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Examples

Default

API

Dialog

PropertyTypePossible valuesDefaultDescription
openbooleantrue, false-Controls the open state (controlled).
onOpenChange(open: boolean) => void--Called when the open state changes.
defaultOpenbooleantrue, falsefalseThe open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
modalbooleantrue, falsetrueWhen true, prevents interaction with elements behind the dialog.
…propsAll Radix Dialog.Root props--All native properties of the Radix UI Dialog Root component.

DialogTrigger

PropertyTypePossible valuesDefaultDescription
asChildbooleantrue, falsefalseWhen true, uses the child as the trigger.
…propsAll Radix Dialog.Trigger props--All native properties of the Radix UI Dialog Trigger component.

DialogContainer

PropertyTypePossible valuesDefaultDescription
classNamestring--Additional CSS classes to apply to the dialog container.
overlayClassNamestring--Additional CSS classes to apply to the dialog overlay (backdrop).
showCloseButtonbooleantrue, falsetrueWhen true, displays a close button in the top-right corner.
…propsAll Radix Dialog.Content props--All native properties of the Radix UI Dialog Content component.

DialogContent

PropertyTypePossible valuesDefaultDescription
classNamestring--Additional CSS classes to apply.
…propsAll native div props--All native properties of a div element. This component is used for the main scrollable content area of the dialog.

DialogHeader

PropertyTypePossible valuesDefaultDescription
classNamestring--Additional CSS classes to apply.
separatorbooleantrue, falsefalseWhen true, displays a separator line below the header spanning the full width of the dialog.
…propsAll native div props--All native properties of a div element.

DialogFooter

PropertyTypePossible valuesDefaultDescription
classNamestring--Additional CSS classes to apply.
separatorbooleantrue, falsefalseWhen true, displays a separator line above the footer spanning the full width of the dialog.
…propsAll native div props--All native properties of a div element.

DialogTitle

PropertyTypePossible valuesDefaultDescription
classNamestring--Additional CSS classes to apply.
…propsAll Radix Dialog.Title props--All native properties of the Radix UI Dialog Title component.

DialogDescription

PropertyTypePossible valuesDefaultDescription
classNamestring--Additional CSS classes to apply.
…propsAll Radix Dialog.Description props--All native properties of the Radix UI Dialog Description component.

DialogClose

PropertyTypePossible valuesDefaultDescription
asChildbooleantrue, falsefalseWhen true, uses the child as the close trigger.
…propsAll Radix Dialog.Close props--All native properties of the Radix UI Dialog Close component.
Last updated on