Shadcn.io is not affiliated with official shadcn/ui
Button with Count
A link-styled button with count badge showing quantified information like notification counts or item totals
Numbers matter—sometimes links need to show count context. This React link button combines shadcn/ui's minimal link variant with a rounded Badge component displaying numeric values like unread counts, cart items, or pending notifications. Built with gap-2 spacing and secondary badge variant maintaining subtle visual weight, it creates informative inline action patterns. Perfect for "View Messages (3)" in communication apps, "Shopping Cart (12 items)" in e-commerce navigation, or "Pending Reviews (5)" in admin panels—the count badge provides instant context while preserving link button's minimal styling.
Button with Count preview
Installation
Related Components
Standard Link
Basic link without count badge
Link with Icon
Icon-enhanced link button
Primary with Count
Count badge on filled button
Outline with Count
Count badge on bordered button
Standard Badge
Standalone count indicator
Loading Link
Link with loading spinner
FAQ
Was this page helpful?
Sign in to leave feedback.