Component

Alert Dialog

Modal dialog for confirmations and destructive actions.

Preview

Examples

Default

Neutral confirmation; primary action is not destructive.

Destructive

Irreversible action; primary button uses destructive styling.

AI Prompt

Ready to copy and paste into any AI model.

10 lines

prompt.txt

Build a shadcn/ui Alert Dialog for the **Clinic Admin** design system.

**Brand tokens:** Primary #70C4CA, destructive #F7A9AA, border #C4D0DB, radius 10px. Font: Nunito Sans.

**Design preview to replicate exactly:**
- Default: Trigger "Open confirmation"; Content size sm — Title "Archive this record?", Description about moving to archive; Footer Cancel + primary "Archive" (not destructive)
- Destructive: Trigger "Delete record"; Title "Delete this record?", Description about permanence; Footer Cancel + AlertDialogAction variant destructive "Delete"
- Use Radix AlertDialog with AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction

Return React components matching the preview. Use cn() + Tailwind CSS.

Copy once, paste anywhere, keep consistent output.