Alert Dialog

An alert dialog is a modal that interrupts the user to confirm a consequential action. Use it for destructive or irreversible choices such as deleting an account, where the user must explicitly confirm or cancel.

For non-blocking dialogs the user can dismiss freely, use Dialog instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/alert-dialog

Usage

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/cubby-ui/alert-dialog";

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Composition

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    ├── AlertDialogBody
    └── AlertDialogFooter
        └── AlertDialogClose

Examples

Controlled

Use the open and onOpenChange props on AlertDialog to control the open state.

Nested

Nest alert dialogs to chain multi-step confirmations.

Detached Trigger

Use createAlertDialogHandle() to drive one dialog from triggers rendered outside it.

API Reference

The AlertDialog component is built on top of Base UI's AlertDialog. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.

For the complete Base UI API, see the Base UI AlertDialog documentation.

Utilities

createAlertDialogHandle

Creates a handle that connects an alert dialog to one or more external AlertDialogTrigger components. Useful when the triggers need to live outside the AlertDialog, for example when each row in a list has its own delete button but they all share one confirmation dialog.

import { createAlertDialogHandle } from "@/registry/default/alert-dialog/alert-dialog";
 
const handle = createAlertDialogHandle();

Passing data from the trigger to the alert dialog

The handle accepts an optional <Payload> generic that types a value each trigger can pass along. The alert dialog reads it through a render-prop child, so you can render different content (or target different resources) per trigger without duplicating the dialog markup.

type User = { id: string; name: string };
 
const handle = createAlertDialogHandle<User>();
 
// Multiple triggers, each with its own payload:
users.map((user) => (
  <AlertDialogTrigger key={user.id} handle={handle} payload={user}>
    Delete {user.name}
  </AlertDialogTrigger>
));
 
// One shared alert dialog that renders based on the active trigger:
<AlertDialog handle={handle}>
  <AlertDialogContent>
    {({ payload: user }) => (
      <AlertDialogHeader>
        <AlertDialogTitle>Delete {user?.name}?</AlertDialogTitle>
      </AlertDialogHeader>
    )}
  </AlertDialogContent>
</AlertDialog>;

Without the <User> generic, payload inside the render prop resolves to unknown.

Props

AlertDialogContent

Modal container for important messages requiring user action. Composes AlertDialog.Portal, AlertDialog.Backdrop, and AlertDialog.Popup. Props are forwarded to AlertDialog.Popup.

AlertDialogBody

Scrollable content area within the alert dialog.

Notes

AlertDialogClose

Use AlertDialogClose with the render prop to create action buttons that close the dialog. Wraps Base UI's AlertDialog.Close.

<AlertDialogFooter>
  <AlertDialogClose render={<Button variant="outline">Cancel</Button>} />
  <AlertDialogClose render={<Button variant="destructive">Delete</Button>} />
</AlertDialogFooter>