> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/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.

## Overview

A modal dialog that interrupts the user with important content and expects a response. Built on top of Dialog with additional features for alerts.

## Features

* Focus is automatically trapped within the dialog
* Can be controlled or uncontrolled
* Manages screen reader announcements with Title and Description components
* Esc key closes the dialog
* Prevents closing when clicking outside
* Scrolling is blocked on the body when open
* Always modal (cannot be changed)
* Focuses Cancel button by default

## Installation

```bash theme={null}
npm install @radix-ui/react-alert-dialog
```

## Anatomy

Import all parts and piece them together.

```tsx theme={null}
import * as AlertDialog from '@radix-ui/react-alert-dialog';

export default () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger />
    <AlertDialog.Portal>
      <AlertDialog.Overlay />
      <AlertDialog.Content>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Cancel />
        <AlertDialog.Action />
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);
```

## API Reference

### Root

Contains all the alert dialog component parts.

<ParamField path="open" type="boolean">
  The controlled open state of the alert dialog. Must be used in conjunction with `onOpenChange`.
</ParamField>

<ParamField path="defaultOpen" type="boolean">
  The open state of the alert dialog when it is initially rendered. Use when you do not need to control its open state.
</ParamField>

<ParamField path="onOpenChange" type="(open: boolean) => void">
  Event handler called when the open state of the alert dialog changes.
</ParamField>

<Note>
  The `modal` prop is not available on AlertDialog. It is always `true`.
</Note>

### Trigger

The button that opens the alert dialog.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

### Portal

When used, portals your overlay and content parts into the `body`.

<ParamField path="container" type="HTMLElement" default="document.body">
  Specify a container element to portal the content into.
</ParamField>

<ParamField path="forceMount" type="boolean">
  Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
</ParamField>

### Overlay

A layer that covers the inert portion of the view when the alert dialog is open.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

<ParamField path="forceMount" type="boolean">
  Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
</ParamField>

### Content

Contains the content to be rendered in the open alert dialog.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

<ParamField path="forceMount" type="boolean">
  Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
</ParamField>

<ParamField path="onOpenAutoFocus" type="(event: Event) => void">
  Event handler called when focus moves into the component after opening. It can be prevented by calling `event.preventDefault`.
</ParamField>

<ParamField path="onCloseAutoFocus" type="(event: Event) => void">
  Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.
</ParamField>

<ParamField path="onEscapeKeyDown" type="(event: KeyboardEvent) => void">
  Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
</ParamField>

<Warning>
  The `onPointerDownOutside` and `onInteractOutside` props are not available on AlertDialog.Content. Clicking outside is always prevented.
</Warning>

### Title

An accessible title to be announced when the alert dialog is opened.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

<Warning>
  This part is required for accessibility. If you want to hide it, wrap it inside `@radix-ui/react-visually-hidden`.
</Warning>

### Description

An accessible description to be announced when the alert dialog is opened.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

<Warning>
  This part is required for accessibility in AlertDialog.
</Warning>

### Cancel

A button that closes the alert dialog. This button should be distinguished from Action buttons.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

<Note>
  This button receives focus by default when the alert dialog opens.
</Note>

### Action

A button that closes the alert dialog and performs the main action.

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child, merging their props and behavior.
</ParamField>

## Example

<CodeGroup>
  ```tsx Basic Usage theme={null}
  import * as AlertDialog from '@radix-ui/react-alert-dialog';

  function AlertDialogDemo() {
    return (
      <AlertDialog.Root>
        <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
        <AlertDialog.Portal>
          <AlertDialog.Overlay className="alert-dialog-overlay" />
          <AlertDialog.Content className="alert-dialog-content">
            <AlertDialog.Title>Are you absolutely sure?</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 style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
              <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
              <AlertDialog.Action>Yes, delete account</AlertDialog.Action>
            </div>
          </AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    );
  }
  ```

  ```tsx Controlled theme={null}
  import { useState } from 'react';
  import * as AlertDialog from '@radix-ui/react-alert-dialog';

  function ControlledAlertDialog() {
    const [open, setOpen] = useState(false);

    const handleDelete = () => {
      // Perform delete action
      console.log('Deleting...');
      setOpen(false);
    };

    return (
      <AlertDialog.Root open={open} onOpenChange={setOpen}>
        <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
        <AlertDialog.Portal>
          <AlertDialog.Overlay />
          <AlertDialog.Content>
            <AlertDialog.Title>Confirm deletion</AlertDialog.Title>
            <AlertDialog.Description>
              This will permanently delete the item.
            </AlertDialog.Description>
            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
            <AlertDialog.Action onClick={handleDelete}>
              Confirm
            </AlertDialog.Action>
          </AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    );
  }
  ```

  ```tsx Custom Styling theme={null}
  import * as AlertDialog from '@radix-ui/react-alert-dialog';
  import './styles.css';

  function StyledAlertDialog() {
    return (
      <AlertDialog.Root>
        <AlertDialog.Trigger className="button-primary">
          Logout
        </AlertDialog.Trigger>
        <AlertDialog.Portal>
          <AlertDialog.Overlay className="overlay" />
          <AlertDialog.Content className="content">
            <AlertDialog.Title className="title">
              End your session?
            </AlertDialog.Title>
            <AlertDialog.Description className="description">
              You will need to sign in again to access your account.
            </AlertDialog.Description>
            <div className="button-group">
              <AlertDialog.Cancel className="button-secondary">
                Stay logged in
              </AlertDialog.Cancel>
              <AlertDialog.Action className="button-danger">
                Logout
              </AlertDialog.Action>
            </div>
          </AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    );
  }
  ```
</CodeGroup>

## Accessibility

Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog).

### Keyboard Interactions

* `Space` - Opens/closes the alert dialog
* `Enter` - Opens/closes the alert dialog
* `Tab` - Moves focus to the next focusable element
* `Shift + Tab` - Moves focus to the previous focusable element
* `Esc` - Closes the alert dialog and moves focus to trigger