Alert Dialog - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/alert-dialog.json

Usage

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

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

AlertDialog

The root component that manages dialog state.

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when the open state changes.
`defaultOpen`	`boolean`	`false`	The default open state for uncontrolled usage.

AlertDialogContent

The modal content container.

AlertDialogHeader

Container for the dialog title and description.

AlertDialogFooter

Container for the action buttons.

AlertDialogTitle

The title of the dialog.

AlertDialogDescription

The description text of the dialog.

AlertDialogAction

The primary action button (confirms the action).

AlertDialogCancel

The cancel button (dismisses the dialog).