Shadcn.io is not affiliated with official shadcn/ui
Like with Count
A like button with adjacent count display showing engagement metrics in social interfaces
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.
Like with Count preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.