React Alert Dialog - Delete Confirmation with Icon
A destructive alert dialog with red Trash icon next to the title for visual deletion emphasis
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Red text alone doesn't always register as dangerous—visual symbols do. This React alert dialog pairs a Trash2 icon from Lucide React with destructive red styling to create instant recognition of deletion intent. Built with shadcn/ui and Radix UI, the icon reinforces what the text says before users process the words. Perfect for file deletions, project removals, or any permanent action where layering visual warnings prevents costly mistakes.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-2.jsonRelated patterns you will also like
Simple Delete
Destructive confirmation without icon
Confirmation with Icon
Non-destructive icon in title
Destructive with Checkbox
Requires checkbox for extra confirmation
Destructive with Warning Badge
Badge indicator for extra emphasis
Destructive Button
Standalone destructive button pattern
Centered Icon
Large centered icon alternative
Questions you might have
React Alert Dialog - Simple Delete Confirmation
A destructive alert dialog with red Delete button for confirming permanent data deletion actions
React Alert Dialog - Destructive with Checkbox Confirmation
A destructive alert dialog requiring checkbox confirmation to enable the delete action for extra protection