Skip to content

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

Free

Social Actions Button Group for Ark UI

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

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 React, Ark UI does not record the like.

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

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="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