Skip to content
Cuelark UI
OverlaysAnimated

Alert Dialog

Confirmation dialogs for destructive or irreversible actions.

An alert dialog interrupts to confirm something that cannot be undone. Unlike a dialog it can't be dismissed by clicking outside. Cuelark's drops in slightly heavier than a dialog, and the destructive tone adds a red rail along the top.

Preview

Installation

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

The CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/alert-dialog.

Builds on: button, motion

Usage

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

<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
  <AlertDialogContent tone="destructive">
    <AlertDialogTitle>Delete project?</AlertDialogTitle>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

Motion

How it moves

Drops in from slightly above with one firm settle (GSAP cue-snap).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

AlertDialogContent

PropTypeDefaultDescription
tone"default" | "destructive""default"Destructive adds a red top rail.

AlertDialogAction

PropTypeDefaultDescription
variant"primary" | "destructive""primary"Button style.

AlertDialogTrigger · AlertDialogHeader · AlertDialogFooter · AlertDialogTitle · AlertDialogDescription · AlertDialogCancel

Accessibility

  • role=alertdialog; focus starts on Cancel, the safe choice.
  • Outside clicks do not close it; Esc does.

FAQ

Also searched as: react confirm dialog · alert dialog · delete confirmation modal · shadcn alert dialog · are you sure dialog