Alert Dialog

A dialog that requires user response to proceed.

import * as React from 'react';
import { AlertDialog } from '@base-ui-components/react/alert-dialog';
import styles from './index.module.css';

export default function ExampleAlertDialog() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger data-color="red" className={styles.Button}>
        Discard draft
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className={styles.Backdrop} />
        <AlertDialog.Popup className={styles.Popup}>
          <AlertDialog.Title className={styles.Title}>
            Discard draft?
          </AlertDialog.Title>
          <AlertDialog.Description className={styles.Description}>
            You can't undo this action.
          </AlertDialog.Description>
          <div className={styles.Actions}>
            <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
            <AlertDialog.Close data-color="red" className={styles.Button}>
              Discard
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

API reference

Import the component and assemble its parts:

Anatomy

import { AlertDialog } from '@base-ui-components/react/alert-dialog';
<AlertDialog.Root>  <AlertDialog.Trigger />  <AlertDialog.Portal>    <AlertDialog.Backdrop />    <AlertDialog.Popup>      <AlertDialog.Title />      <AlertDialog.Description />      <AlertDialog.Close />    </AlertDialog.Popup>  </AlertDialog.Portal></AlertDialog.Root>

Root

Groups all parts of the alert dialog. Doesn’t render its own HTML element.

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`undefined`
`onOpenChange`	`(open, event, reason) => void`	`undefined`

Trigger

A button that opens the alert dialog. Renders a <button> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-popup-open`	Present when the corresponding dialog is open.

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>.

Prop	Type	Default
`container`	`React.Ref \| HTMLElement \| null`	`undefined`
`keepMounted`	`boolean`	`false`

Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-open`	Present when the dialog is open.
`data-closed`	Present when the dialog is closed.
`data-starting-style`	Present when the dialog is animating in.
`data-ending-style`	Present when the dialog is animating out.

A container for the alert dialog contents. Renders a <div> element.

Prop	Type	Default
`initialFocus`	`\| React.Ref \| (interactionType => HTMLElement \| null)`	`undefined`
`finalFocus`	`React.Ref`	`undefined`
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-open`	Present when the dialog is open.
`data-closed`	Present when the dialog is closed.
`data-has-nested-dialogs`	Present when the dialog has other open dialogs nested within it.
`data-nested`	Present when the dialog is nested within another dialog.
`data-starting-style`	Present when the dialog is animating in.
`data-ending-style`	Present when the dialog is animating out.

Title

A heading that labels the dialog. Renders an <h2> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Description

A paragraph with additional information about the alert dialog. Renders a <p> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Close

A button that closes the alert dialog. Renders a <button> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Examples

In order to open a dialog using a menu, control the dialog state and open it imperatively using the onClick handler on the menu item.

Make sure to also use the dialog’s finalFocus prop to return focus back to the menu trigger.

Connecting a dialog to a menu

import * as React from 'react';import { AlertDialog } from '@base-ui/components/alert-dialog';import { Menu } from '@base-ui/components/menu';
function ExampleMenu() {  const menuTriggerRef = React.useRef<HTMLButtonElement>(null);  const [dialogOpen, setDialogOpen] = React.useState(false);
  return (    <React.Fragment>      <Menu.Root>        {/* Set the trigger ref */}        <Menu.Trigger ref={menuTriggerRef}>Open menu</Menu.Trigger>        <Menu.Portal>          <Menu.Positioner>            <Menu.Popup>              {/* Open the dialog when the menu item is clicked */}              <Menu.Item onClick={() => setDialogOpen(true)}>Open dialog</Menu.Item>            </Menu.Popup>          </Menu.Positioner>        </Menu.Portal>      </Menu.Root>
      {/* Control the dialog state */}      <AlertDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>        <AlertDialog.Portal>          <AlertDialog.Backdrop />          {/* Return focus to the menu trigger when the dialog is closed */}          <AlertDialog.Popup finalFocus={menuTriggerRef}>          </AlertDialog.Popup>        </AlertDialog.Portal>      </AlertDialog.Root>    </React.Fragment>  );}

Close confirmation

This example shows a nested confirmation dialog that opens if the text entered in the parent dialog is going to be discarded.

To implement this, both dialogs should be controlled. The confirmation dialog may be opened when onOpenChange callback of the parent dialog receives a request to close. This way, the confirmation is automatically shown when the user clicks the backdrop, presses the Esc key, or clicks a close button.

Use the [data-has-nested-dialogs] selector and the var(--nested-dialogs) CSS variable to customize the styling of the parent dialog. Backdrops of the child dialogs won’t be rendered so that you can present the parent dialog in a clean way behind the one on top of it.