Shadcn.io is not affiliated with official shadcn/ui
Button with Count
An outline button with count badge combining border styling with quantified information display
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.
Button with Count preview
Installation
Related Components
Standard Outline
Basic border button without count
Outline with Icon
Border button with left icon
Primary with Count
Count badge on filled button
Link with Count
Count badge on minimal button
Standard Badge
Standalone count indicator
Loading Outline
Border button with spinner
FAQ
Was this page helpful?
Sign in to leave feedback.