Recipe
Delete confirmation
Irreversible delete needs a blocking confirm — never a toast.
Parts
- Modal DialogA centered window that blocks the page until the user responds.
- Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.
- Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.
Avoid
- · Toast / Snackbar
Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).
Product task: Delete confirmation
Irreversible delete needs a blocking confirm — never a toast.
Compose these UI patterns:
- Modal Dialog: A centered window that blocks the page until the user responds.; use shadcn Dialog / Radix Dialog
- Button / Action Button: A semantic control for an action, with hierarchy expressed through its visual variant.; use shadcn Button (variants)
- Scrim / Overlay / Backdrop: A translucent layer under an overlay that dims the page and blocks clicks.; use Dialog overlay / fixed inset-0 bg-black/45
Avoid:
- Do not use Toast / Snackbar: A brief, non-blocking status bar that appears after an action and dismisses itself.
Brief:
Build a delete confirmation:
1. Primary trigger: destructive button labeled "Delete" (or similar).
2. On click: center Modal over a Scrim that blocks clicks to the page behind.
3. Modal title is a question ("Delete this file?"), body states the consequence (e.g. recoverable from Trash for 30 days, or permanent).
4. Actions: Cancel (secondary) + Delete (destructive primary). Esc and scrim dismiss = Cancel; return focus to the trigger.
5. Do NOT put Confirm/Cancel in a Toast — it auto-dismisses before the user can act.
Stack-aware implementation; match existing product styles.
Implement as a minimal, coherent flow. Match existing project style.