Shadcn.io is not affiliated with official shadcn/ui
Button with Count
A destructive button with count badge showing number of items being deleted in bulk operations
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.
Button with Count preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.