Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Count
An outline button with count badge combining border styling with quantified information display
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Numbers within borders—outline buttons show context through count badges. This React outline button pairs shadcn/ui's border-only styling with a rounded Badge component displaying numeric values like pending items, unread counts, or cart quantities. Built with gap-2 spacing and secondary badge variant maintaining bordered visual hierarchy, it creates informative secondary action patterns. Perfect for "View Cart (3 items)" in e-commerce navigation where outline signals optional action, "Review Comments (12)" in content moderation requiring clear count without primary emphasis, or "Pending Approvals (5)" in admin panels showing actionable quantities—the bordered count combination provides context while preserving secondary visual weight.
Pattern created by @haydenbleasel