Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

DialogBackdrop API

Import

import * as Dialog from '@base_ui/react/Dialog';
const DialogBackdrop = Dialog.Backdrop;

Props

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
keepMounted	bool	false	If `true`, the backdrop element is kept in the DOM when closed.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use DialogBackdrop to change the default props of this component with the theme.

DialogClose API

Import

import * as Dialog from '@base_ui/react/Dialog';
const DialogClose = Dialog.Close;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use DialogClose to change the default props of this component with the theme.

DialogDescription API

Import

import * as Dialog from '@base_ui/react/Dialog';
const DialogDescription = Dialog.Description;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use DialogDescription to change the default props of this component with the theme.

import * as Dialog from '@base_ui/react/Dialog';
const DialogPopup = Dialog.Popup;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
container	HTML element \| ref	-	The container element to which the popup is appended to.
keepMounted	bool	false	If `true`, the dialog element is kept in the DOM when closed.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use DialogPopup to change the default props of this component with the theme.

DialogRoot API

Import

import * as Dialog from '@base_ui/react/Dialog';
const DialogRoot = Dialog.Root;

Props

Props of the native component are also available.

Name	Type	Default	Description
animated	bool	true	If `true`, the dialog supports CSS-based animations and transitions. It is kept in the DOM until the animation completes.
defaultOpen	bool	-	Determines whether the dialog is initally open. This is an uncontrolled equivalent of the `open` prop.
dismissible	bool	true	Determines whether the dialog should close when clicking outside of it.
modal	bool	true	Determines whether the dialog is modal.
onOpenChange	func	-	Callback invoked when the dialog is being opened or closed.
open	bool	-	Determines whether the dialog is open.

The component cannot hold a ref.

DialogTitle API

Import

import * as Dialog from '@base_ui/react/Dialog';
const DialogTitle = Dialog.Title;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use DialogTitle to change the default props of this component with the theme.

DialogTrigger API

Import

import * as Dialog from '@base_ui/react/Dialog';
const DialogTrigger = Dialog.Trigger;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use DialogTrigger to change the default props of this component with the theme.