Layout UI

Alert Dialog

Interruption dialog for irreversible or high-stakes actions. Built on Base UI AlertDialog with ARIA alertdialog role. Action button styled as default, cancel as outline.

Preview

Installation

bash
npx shadcn@latest add @layout/alert-dialog

Usage

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

Examples

Sign out

Guidelines for AI agents

Use exclusively for destructive or irreversible actions such as deletion, account termination, or data loss. Always name the action button with the exact action (e.g. 'Delete project') not a generic 'OK'. Cancel always goes on the left, action on the right. For non-destructive confirmations use Dialog instead.

Never

  • Neveruse AlertDialog for non-destructive confirmations — use Dialog
  • Neverlabel the action button 'OK' or 'Confirm' — use the specific action verb
  • Neveromit AlertDialogCancel; the user must always have a safe exit
  • Neveruse AlertDialog for contextual or anchored content — use Popover

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-lg--layout-radius--layout-duration-base--layout-danger--layout-danger-fg