Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Social Actions Button Group for Solid

Like, Comment, and Share as labeled buttons, and the same three actions again as an icon-only row.

UI library: Ark UI

The engagement row, twice. The first spells out Like, Comment, and Share. The second is icon-only, and each button has a name. The rows do not share state. Nothing shows a post as already liked, and there is no count.

Use the labels when there is room and the icons in a dense feed. Sharing can open a Dropdown Menu. In Solid, Ark UI does not record the like.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
    <ButtonGroup aria-label="Post actions">
      <Button size="sm" variant="outline">
        <HeartIcon aria-hidden="true" data-icon="inline-start" />
        Like
      </Button>
      <Button size="sm" variant="outline">
        <MessageCircleIcon aria-hidden="true" data-icon="inline-start" />
        Comment
      </Button>
      <Button size="sm" variant="outline">
        <Share2Icon aria-hidden="true" data-icon="inline-start" />
        Share
      </Button>
    </ButtonGroup>
    <ButtonGroup aria-label="Post actions">
      <Button aria-label="Like" size="icon-sm" variant="outline">
        <HeartIcon aria-hidden="true" />
      </Button>
      <Button aria-label="Comment" size="icon-sm" variant="outline">
        <MessageCircleIcon aria-hidden="true" />
      </Button>
      <Button aria-label="Share" size="icon-sm" variant="outline">
        <Share2Icon aria-hidden="true" />
      </Button>
    </ButtonGroup>
  </div>

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.

API Reference

Button Group

Sets aria-label="Post actions". The rest is on the Button Group page.

Button

Sets size="sm", variant="outline", aria-label="Like", size="icon-sm", aria-label="Comment" and aria-label="Share". The rest is on the Button page.

All 39 button group examples