Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Actions

Social Actions Button Group for React

Like, Comment and Share in one button group, with labels and as an icon-only row.

Framework
UI library

The engagement row under a post. The labeled group spells out Like, Comment and Share; the icon-only group is the compact version for feeds, with an aria-label on each button so the actions still have names.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is in the labeled row?

Like, Comment and Share, each with an icon, size="sm" and variant="outline". The second group repeats the same three icons with no visible text.

How are the icon-only buttons named?

Each Button in the second group has an aria-label, Like, Comment or Share, and size="icon-sm". The icons have aria-hidden="true".

How do I show that a post is liked?

Keep a liked flag, switch that button's variant to default and set aria-pressed. The Like with Count example shows the liked state.

How do I add the number of likes?

Put a ButtonGroupText after the button with the count, as in Like with Count. This demo shows no counts.

Do the two rows share state?

No. They are two layouts of the same actions, stacked with gap-4. Nothing in the file is stateful.

What should Share open?

Whatever your app shares to: a menu of targets, a copy-link action, or the system share sheet. The demo's button has no handler.

All 39 button group examples