React Button Group - Messages and Followers
Communication buttons with badges and follower counts for social and messaging interfaces
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Communication requires visibility—message counts and follower metrics drive engagement decisions. This React component combines shadcn/ui's Button, ButtonGroup, Badge, and ButtonGroupText components with Lucide React's MailIcon and UserPlusIcon for communication controls with overlay badges and inline metrics. Built on Radix UI with destructive variant badges for urgent message counts, variant switching between outline (unfollowed) and default (following) states, and ButtonGroupText for follower metrics, the pattern delivers social communication buttons with comprehensive context. Perfect for social platforms showing unread messages and follower counts, community forums displaying new activity, messaging applications indicating pending conversations, or any interface where communication metrics should guide user attention—badges signal urgency, text displays social proof, toggle states communicate relationship status.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-4.jsonRelated patterns you will also like
Notifications Button
Badge overlay patterns
Like with Count
Social engagement metrics
Social Actions
Social interaction controls
Destructive Badge
Urgent count indicators
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons