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 place its parts the following way:

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`
`onOpenChange`	`(open, event) => void`	`undefined`
`open`	`boolean`	`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-closed`	Present when the dialog is closed.
`data-ending-style`	Present when the dialog is animating out.
`data-open`	Present when the dialog is open.
`data-starting-style`	Present when the dialog is animating in.

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

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

Attribute	Description
`data-closed`	Present when the dialog is closed.
`data-ending-style`	Present when the dialog is animating out.
`data-nested-dialogs`	Indicates how many dialogs are nested within.
`data-open`	Present when the dialog is open.
`data-starting-style`	Present when the dialog is animating in.

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`