Alert Dialog

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

AlertDialogBackdrop API

Import

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogBackdrop = AlertDialog.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 AlertDialogBackdrop to change the default props of this component with the theme.

AlertDialogClose API

Import

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogClose = AlertDialog.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 AlertDialogClose to change the default props of this component with the theme.

AlertDialogDescription API

Import

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogDescription = AlertDialog.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 AlertDialogDescription to change the default props of this component with the theme.

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogPopup = AlertDialog.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 AlertDialogPopup to change the default props of this component with the theme.

AlertDialogRoot API

Import

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogRoot = AlertDialog.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.
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.

AlertDialogTitle API

Import

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogTitle = AlertDialog.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 AlertDialogTitle to change the default props of this component with the theme.

AlertDialogTrigger API

Import

import * as AlertDialog from '@base_ui/react/AlertDialog';
const AlertDialogTrigger = AlertDialog.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 AlertDialogTrigger to change the default props of this component with the theme.