Alert Dialog

Preview

Installation

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

Usage

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

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Controlled

Control the alert dialog open state programmatically.

Custom Backdrop

Customize the backdrop appearance and behavior.

Nested

Use nested alert dialogs for multi-step confirmations.

API Reference

AlertDialogContent

AlertDialogAction

Automatically renders as a destructive Button variant for primary actions (like "Delete" or "Confirm"). This component extends the Button component with appropriate styling for alert actions.

AlertDialogCancel

Automatically renders as a ghost Button variant for cancel actions. This component extends the Button component with appropriate styling for cancellation.

Additional Props

AlertDialog components inherit all props from Base UI Alert Dialog, including open, defaultOpen, onOpenChange, modal, and accessibility props.