Alert Dialog

AlertDialog is for moments where a click carries meaningful risk: deleting work, unpublishing a launch, archiving live content, or committing to a destructive system change. It should confirm the consequence, not replace ordinary decision-making.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete draft</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete working draft</AlertDialogTitle>
      <AlertDialogDescription>
        This removes the unpublished draft and its revision history.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Keep draft</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Why This Primitive Exists

High-risk actions need one extra moment of clarity. This wrapper keeps the confirmation pattern consistent, accessible, and visually aligned with the rest of the Swiss system.

• Use it when the action is destructive, expensive to undo, or legally meaningful.
• Keep the trigger near the risky control it protects.
• Avoid using it for routine choices where inline validation or a standard dialog would be enough.

Examples

Destructive Confirmation

This is the baseline pattern for deleting or removing content.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete draft</Button>
  </AlertDialogTrigger>
  {/* content */}
</AlertDialog>

Secondary Confirmation

Not every alert dialog needs a red trigger. Sometimes the risk is structural rather than destructive, such as archiving or hiding content.

<AlertDialogTrigger asChild>
  <Button variant="outline">Archive collection</Button>
</AlertDialogTrigger>

In Context

Keep the confirmation attached to the area where the consequence is already explained.

Guidance

Confirm Consequence, Not Intent

• The dialog title should name exactly what will happen.
• The description should explain what disappears, changes, or becomes unavailable.
• If the action is harmless to undo, the confirmation is probably unnecessary friction.

Keep Actions Uneven

• The confirm button should be obvious.
• The cancel action should stay present but visually quieter.
• Avoid adding multiple extra choices that turn a confirmation into a workflow.

Respect Urgency

• Use this primitive sparingly so it keeps its weight.
• Put any prerequisite review information on the page before the dialog opens.
• If users must inspect rich content before deciding, use a standard dialog instead.

API Reference

Exported Parts

Behavior Notes

• The component inherits Radix Alert Dialog behavior and accessibility semantics.
• AlertDialogAction and AlertDialogCancel accept the underlying Radix action props in addition to className.
• Use asChild on AlertDialogTrigger when the trigger should remain a Button or link.