Skip to main content

​
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

npm install @radix-ui/react-alert-dialog

​
Anatomy

Import all parts and piece them together. 
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.
​
open
boolean
The controlled open state of the alert dialog. Must be used in conjunction with onOpenChange.
​
defaultOpen
boolean
The open state of the alert dialog when it is initially rendered. Use when you do not need to control its open state.
​
onOpenChange
(open: boolean) => void
Event handler called when the open state of the alert dialog changes.
The modal prop is not available on AlertDialog. It is always true.

​
Trigger

The button that opens the alert dialog.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.

​
Portal

When used, portals your overlay and content parts into the body.
​
container
HTMLElement
default:"document.body"
Specify a container element to portal the content into.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

​
Overlay

A layer that covers the inert portion of the view when the alert dialog is open.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

​
Content

Contains the content to be rendered in the open alert dialog.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
​
onOpenAutoFocus
(event: Event) => void
Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault.
​
onCloseAutoFocus
(event: Event) => void
Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
​
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
The onPointerDownOutside and onInteractOutside props are not available on AlertDialog.Content. Clicking outside is always prevented.

​
Title

An accessible title to be announced when the alert dialog is opened.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
This part is required for accessibility. If you want to hide it, wrap it inside @radix-ui/react-visually-hidden.

​
Description

An accessible description to be announced when the alert dialog is opened.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
This part is required for accessibility in AlertDialog.

​
Cancel

A button that closes the alert dialog. This button should be distinguished from Action buttons.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
This button receives focus by default when the alert dialog opens.

​
Action

A button that closes the alert dialog and performs the main action.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.

​
Example

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>
  );
}

​
Accessibility

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us