> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert Dialog

> A modal dialog that interrupts the user with important content and expects a response.

# 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

```jsx theme={null}
import { AlertDialog } from '@base-ui/react/alert-dialog';
```

## Basic Usage

```jsx theme={null}
<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

```css theme={null}
.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)