Alert Dialog

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>

Examples

Controlled

Control the alert dialog open state programmatically.

Nested

Use nested alert dialogs for multi-step confirmations.

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.

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>