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.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.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.Backdrop />
  <AlertDialog.Popup>
    <AlertDialog.Title />
    <AlertDialog.Description />
    <AlertDialog.Close />
  </AlertDialog.Popup>
</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`

Backdrop

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

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

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

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

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`