Alert Dialog

The React Alert Dialog component shows a modal window on top of the page to ask users to confirm an important action. It is used for actions like deleting data, logging out, or making permanent changes.

It opens as an overlay and blocks interaction with the background until the user takes action. For example, users must confirm before deleting an account or removing a file.

Built with React and react-aria-components, and styled using Tailwind CSS. It supports keyboard navigation, focus management, and accessible modal behavior.

Installation

npx @tailgrids/cli add alert-dialog

Anatomy

Wrap the AlertDialog component with Backdrop to create a complete alert dialog experience with backdrop behavior.

"use client";

import { AlertDialog } from "@/registry/core/alert-dialog";
import { Button } from "@/registry/core/button";
import {
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "@/registry/core/dialog";
import { OverlayWrapper } from "@/registry/core/overlay";

export default function AlertDialogPreview() {
  return (
    <OverlayWrapper>
      <Button />

      <AlertDialog>
        <DialogHeader>
          <DialogTitle />
          <DialogDescription />
        </DialogHeader>

        <DialogFooter>
          <DialogClose />
        </DialogFooter>
      </AlertDialog>
    </OverlayWrapper>
  );
}

Examples

Basic

Wrap the AlertDialog component with OverlayWrapper to create a basic alert dialog component.

Controlled

Use the isOpen and onOpenChange props to control the open state of the alert dialog.

Autofocus

Pass autoFocus to desired elements to automatically focus them when the alert dialog opens.

API Reference

AlertDialog

The root component that wraps all the content and provides alert dialog behavior and accessibility features.

Composition

The Alert Dialog should be composed the same as Dialog without the Backdrop component.

OverlayWrapper                  — A stateful wrapper that manages the open state of the alert dialog and backdrop.
└── Button                      — The trigger button that opens the alert dialog.
    └── AriaDialog              — The dialog panel with `alertdialog` role and accessible behavior.
        └── children            — Content of the dialog.

• Follow the same composition as Dialog without the Backdrop component.
• Use DialogHeader, DialogTitle, DialogDescription and other Dialog sub-components to structure the content of the alert dialog.

Accessibility

• Dialog role: The AlertDialog component renders with role="alertdialog" by default.
• Focus management: The alert dialog keeps focus while open and returns focus to the trigger when it closes.
• Outside click and Keyboard support: Closing the dialog by clicking outside and Escape key is disabled by default. Can be enabled with isDismissable and isKeyboardDismissDisabled props.
• Screen reader support: Screen readers announce the dialog as an alertdialog, so users understand that immediate action is required.