React Button Group - Like with Count
A like button with adjacent count display showing engagement metrics in social interfaces
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Social proof drives engagement—visible like counts encourage participation. This React component combines shadcn/ui's Button, ButtonGroup, and ButtonGroupText components with Lucide React's HeartIcon for social engagement controls with inline count displays. Built on Radix UI with variant switching between outline (unliked) and default (liked) states, filled icon using fill-current, and ButtonGroupText for adjacent count labels, the pattern delivers toggleable social actions with metric visibility. Perfect for social media feeds showing post engagement, content platforms displaying article appreciation, community forums indicating helpful responses, or any interface where social actions need visible metrics—button groups unify action and count, filled icons communicate active state, counts provide social proof.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-2.jsonRelated patterns you will also like
Social Actions
Like, comment, share controls
Messages and Followers
Communication metrics
Standard Button
Basic button component
Badge Component
Count indicators
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons