React Alert Dialog - Destructive with Warning Badge
A destructive alert dialog with a red Permanent Action badge between title and description for extra emphasis
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes a red button isn't enough warning. This React alert dialog adds a Permanent Action badge with destructive styling between the title and description to force a visual speed bump. Built with shadcn/ui and Radix UI with Database icon from Lucide React, the badge creates a distinct warning layer. Perfect for data purges, cache clears, or any irreversible operation where an extra visual barrier prevents accidental catastrophe.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-6.jsonRelated patterns you will also like
Delete with Icon
Destructive confirmation with icon
Destructive with Consequences
Bulleted list of deletion impacts
Destructive Badge
Standalone destructive badge patterns
Destructive with Checkbox
Checkbox confirmation requirement
Destructive Alert
Inline destructive alert component
Simple Confirmation
Non-destructive confirmation pattern
Questions you might have
React Alert Dialog - Destructive with Custom Styled Buttons
A destructive alert dialog with X icons in both title and action button plus contextual button labels
React Alert Dialog - Destructive with Item Count
A destructive alert dialog displaying item count in title and button for bulk deletion awareness