Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Count
A destructive button with count badge showing number of items being deleted in bulk operations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Delete one or delete many—users need to know the scope. This React button combines shadcn/ui's destructive Button with Badge component displaying selection count using semi-transparent white styling. Built with bg-white/20 opacity maintaining visibility against red background and rounded-full for pill shape matching button aesthetics, it creates immediate quantification of destructive impact. Perfect for bulk delete operations in email clients selecting multiple messages, file managers removing several documents, or admin panels terminating multiple user accounts—the count badge prevents accidental mass deletion by showing exact affected quantity.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Destructive
Basic delete without count display
Destructive Badge
Standalone error count indicator
Loading Destructive
Progress state during deletion
Checkbox Selection
Multi-item selection component
Primary with Count
Count badge on primary button
Table with Selection
Bulk operation table pattern