React Button Group - Social Actions
A button group for social engagement actions with Like, Comment, and Share controls in unified layouts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Social actions cluster naturally—users expect engagement controls together. This React button group combines shadcn/ui's Button and ButtonGroup components with Lucide React's HeartIcon, MessageCircleIcon, and Share2Icon for cohesive social interaction toolbars. Built on Radix UI with outline variant buttons using size="sm" for compact action bars, the pattern provides both icon-with-text and icon-only variations for flexible content engagement interfaces. Perfect for blog post footers where readers engage without scrolling, social media feeds displaying interaction options compactly, comment threads offering consistent engagement patterns, or any content interface where social actions should feel grouped and discoverable—button groups unify actions, social icons communicate intent clearly.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-1.jsonRelated patterns you will also like
Comment Actions
Reply, edit, delete controls
Basic Button Group
Foundational grouped buttons
Outline Button
Border-style button variant
Display Button Group
Visual grouping patterns
Standard Button
Basic button component
Badge with Icon
Icon-enhanced indicators