02 — COMPONENTS
Alert Dialog
Confirmation modal for high-impact actions, destructive decisions, and explicit user acknowledgement. Built from shadcn/ui and adapted to the Chuv Studio foundation with straight edges, responsive sizing, and disciplined action hierarchy.
Core Patterns
Use alert dialogs when the action is important enough to interrupt the current flow
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Open confirmation</Button>
</AlertDialogTrigger>
<AlertDialogContent>
...
</AlertDialogContent>
</AlertDialog><AlertDialogAction variant="destructive"> Delete </AlertDialogAction>
Studio Contexts
Examples that fit portfolio publishing, tool workflows, and risky operations
Publish Portfolio
Tooling Review
Risk Warning
<AlertDialogTitle>Publish this case study?</AlertDialogTitle> <AlertDialogDescription> The page will become visible in the portfolio. </AlertDialogDescription>
Content Patterns
Media, description density, and footer actions all shape the tone of the modal
<AlertDialogMedia> <Sparkles /> </AlertDialogMedia>
<AlertDialogContent size="sm"> ... </AlertDialogContent>
Interactive Demo
Adjust size, emphasis, and media treatment to preview the modal structure
Size
Media
Action Tone
Usage
Import, key props, and accessibility behavior
Import
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"Key Props
Use AlertDialogContent size, then compose Header, Media, Title, Description, Footer, Cancel, and Action based on the decision complexity.
When To Use
Use alert dialog when the user must explicitly confirm a risky, important, or irreversible action.
When Not To Use
Avoid using it for lightweight choices or passive information. Use Dialog, Alert, or Tooltip when interruption is unnecessary.
Accessibility Notes
The dialog traps focus and expects an explicit choice. Keep the title clear, action labels specific, and destructive actions visually distinct.