Destructive Action Confirmation Dialog
A confirmation modal for dangerous actions like deleting data, with a text-match requirement before the action button enables.
Prompt
Create a confirmation dialog for a destructive action with: - Modal triggered by a "Delete Project" button - Dialog title: "Delete this project?" - Warning icon in red at the top - Description explaining consequences (data permanently deleted, cannot be undone) - A text input requiring the user to type the project name to confirm - "Delete Project" button stays disabled until text matches - When enabled: button turns red - Cancel button on the left - Smooth open/close animation - Use shadcn/ui AlertDialog, Tailwind CSS
Share:Share on X
More Modals & Dialogs Prompts
Featured
Slide-Over Drawer with FormA right-side slide-over drawer containing a form, commonly used for editing records without leaving the current page.
A keyboard-triggered command palette with search, categorized commands, and keyboard navigation.