Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Count
A link-styled button with count badge showing quantified information like notification counts or item totals
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel