Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Text
A destructive button variant with red background for dangerous or irreversible actions like deletions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Delete, remove, cancel—some actions need visual warning. This React button uses shadcn/ui's destructive variant with bold red styling signaling irreversible operations. Built with variant="destructive" prop triggering red background and white text from the design system, it creates immediate visual distinction from primary actions. Perfect for delete account buttons, remove member actions, or cancel subscription flows where users need unmistakable warning before proceeding with permanent changes.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Destructive with Icon
Delete button with left icon visual
Destructive Dialog
Confirmation dialog for dangerous actions
Outline Button
Subtle alternative button style
Standard Button
Default primary button styling
Loading Destructive
Destructive button with loading state
Destructive Badge
Status indicator for errors