Dialog

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

useDialogClose API

import { useDialogClose } from '@base_ui/react/Dialog';

Name	Type	Description
onOpenChange*	(open: boolean) => void	Callback invoked when the dialog is being opened or closed.
open*	boolean	Determines whether the dialog is open.

Name	Type	Description
getRootProps	(externalProps: React.HTMLAttributes<any>) => React.HTMLAttributes<any>	Resolver for the root element props.

import { useDialogPopup } from '@base_ui/react/Dialog';

Name	Type	Default	Description
animated*	boolean	-	If `true`, the dialog supports CSS-based animations and transitions. It is kept in the DOM until the animation completes.
descriptionElementId*	string \| undefined	-	The id of the description element associated with the dialog.
isTopmost*	boolean	-	Determines if the dialog is the top-most one.
modal*	boolean	-	Determines if the dialog is modal.
onOpenChange*	(open: boolean) => void	-	Callback fired when the dialog is requested to be opened or closed.
open*	boolean	-	Determines if the dialog is open.
ref*	React.Ref<HTMLElement>	-	The ref to the dialog element.
setPopupElementId*	(id: string \| undefined) => void	-	Callback to set the id of the popup element.
titleElementId*	string \| undefined	-	The id of the title element associated with the dialog.
dismissible	boolean	true	Determines whether the dialog should close when clicking outside of it.
id	string	-	The id of the dialog element.

Name	Type	Description
floatingContext	FloatingContext	Floating UI context for the dialog's FloatingFocusManager.
getRootProps	(externalProps: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>	Resolver for the root element props.
mounted	boolean	Determines if the dialog should be mounted even if closed (as the exit animation is still in progress).
transitionStatus	TransitionStatus	The current transition status of the dialog.

import { useDialogRoot } from '@base_ui/react/Dialog';

Name	Type	Default	Description
animated	boolean	true	If `true`, the dialog supports CSS-based animations and transitions. It is kept in the DOM until the animation completes.
defaultOpen	boolean	-	Determines whether the dialog is initally open. This is an uncontrolled equivalent of the `open` prop.
dismissible	boolean	true	Determines whether the dialog should close when clicking outside of it.
modal	boolean	true	Determines whether the dialog is modal.
onNestedDialogClose	() => void	-	Callback to invoke when a nested dialog is closed.
onNestedDialogOpen	(ownChildrenCount: number) => void	-	Callback to invoke when a nested dialog is opened.
onOpenChange	(open: boolean) => void	-	Callback invoked when the dialog is being opened or closed.
open	boolean	-	Determines whether the dialog is open.

Name	Type	Description
descriptionElementId	string \| undefined	The id of the description element associated with the dialog.
modal	boolean	Determines if the dialog is modal.
nestedOpenDialogCount	number	Number of nested dialogs that are currently open.
onOpenChange	(open: boolean) => void	Callback to fire when the dialog is requested to be opened or closed.
open	boolean	Determines if the dialog is open.
popupElementId	string \| undefined	The id of the popup element.
setBackdropPresent	(present: boolean) => void	Callback to notify the dialog that the backdrop is present.
setDescriptionElementId	(elementId: string \| undefined) => void	Callback to set the id of the description element associated with the dialog.
setPopupElementId	(elementId: string \| undefined) => void	Callback to set the id of the popup element.
setTitleElementId	(elementId: string \| undefined) => void	Callback to set the id of the title element.
titleElementId	string \| undefined	The id of the title element associated with the dialog.
onNestedDialogClose?	() => void	Callback to invoke when a nested dialog is closed.
onNestedDialogOpen?	(ownChildrenCount: number) => void	Callback to invoke when a nested dialog is opened.

import { useDialogTrigger } from '@base_ui/react/Dialog';

Name	Type	Description
onOpenChange*	(open: boolean) => void	Callback to fire when the dialog is requested to be opened or closed.
open*	boolean	Determines if the dialog is open.
popupElementId*	string \| undefined	The id of the popup element.

Name	Type	Description
getRootProps	(externalProps?: React.HTMLAttributes<any>) => React.HTMLAttributes<any>	Resolver for the root element props.