Skip to main content

​
Alert Dialog

An alert dialog is a modal dialog that interrupts the user’s workflow to communicate an important message and acquire a response. Unlike a regular dialog, alert dialogs are always modal and cannot be dismissed by clicking outside or pressing Escape without an explicit user action.

​
Import

import { AlertDialog } from '@base-ui/react/alert-dialog';

​
Basic Usage

<AlertDialog.Root>
  <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Backdrop />
    <AlertDialog.Popup>
      <AlertDialog.Title>Delete Account?</AlertDialog.Title>
      <AlertDialog.Description>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialog.Description>
      <div>
        <AlertDialog.Close>Cancel</AlertDialog.Close>
        <AlertDialog.Close>Delete</AlertDialog.Close>
      </div>
    </AlertDialog.Popup>
  </AlertDialog.Portal>
</AlertDialog.Root>

​
Sub-components

​
Root

Groups all parts of the alert dialog. Doesn’t render its own HTML element. Key Props:
  • open (boolean): Whether the alert dialog is currently open
  • defaultOpen (boolean): Whether the alert dialog is initially open (default: false)
  • onOpenChange ((open: boolean, eventDetails) => void): Event handler called when the alert dialog is opened or closed
  • handle (DialogHandle): A handle to associate the alert dialog with an external trigger
  • actionsRef (React.RefObject): A ref to imperative actions (unmount, close)

​
Trigger

The button that opens the alert dialog.

​
Portal

Portals the alert dialog content to a different part of the DOM.

​
Backdrop

The backdrop that covers the screen when the alert dialog is open.

​
Popup

The container for the alert dialog content.

​
Title

An accessible title for the alert dialog.

​
Description

An accessible description for the alert dialog.

​
Close

A button that closes the alert dialog.

​
Viewport

Defines the viewport element to which the dialog is confined.

​
Styling Example

.AlertDialogBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 200ms;
}

.AlertDialogPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.25);
  max-width: 500px;
  animation: slideIn 200ms;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

​
Accessibility

  • Has role="alertdialog" to identify it as an alert dialog
  • Title and description are automatically linked via aria-labelledby and aria-describedby
  • Focus is trapped within the dialog when open
  • The backdrop and outside elements are inert when the dialog is open
  • Alert dialogs are always modal and require explicit user action to dismiss
  • Pressing Escape does not close the alert dialog (unlike regular dialogs)