Skip to content

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

Free

Like with Count Button Group for Vue

A Like button joined to 1.2k, an icon-only like joined to 342, and a filled Liked button with 1.2k.

UI library: Ark UI

Three like controls, and pressing one does not change the others. The first says Like beside 1.2k. The second is an icon named Like beside 342. The third says Liked, with a filled heart and a filled button, beside 1.2k.

Join the count when it belongs to the action. If you do not need the number attached, a Button is enough. In Vue, Ark UI does not store the like or the count.

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="Likes">
    <Button size="sm" variant="outline">
      <HeartIcon aria-hidden="true" data-icon="inline-start" />Like
    </Button>
    <ButtonGroupText>1.2k</ButtonGroupText>
  </ButtonGroup>
  <ButtonGroup aria-label="Likes">
    <Button aria-label="Like" size="icon-sm" variant="outline">
      <HeartIcon aria-hidden="true" />
    </Button>
    <ButtonGroupText>342</ButtonGroupText>
  </ButtonGroup>
  <ButtonGroup aria-label="Likes">
    <Button aria-pressed="true" size="sm">
      <HeartIcon aria-hidden="true" class="fill-current" data-icon="inline-start" />Liked
    </Button>
    <ButtonGroupText>1.2k</ButtonGroupText>
  </ButtonGroup>
</div>

FAQ

Why is the count in ButtonGroupText and not in the button?

The count isn't something you press. ButtonGroupText shows 1.2k or 342 next to the button without taking focus, and it shares the group's border.

How is the liked state drawn?

The third group's button uses the default variant, the label Liked and fill-current on HeartIcon, so the heart fills with the text color. It also sets aria-pressed, so a screen reader announces it as pressed.

How is the icon-only like button named?

It has aria-label="Like" and size="icon-sm". The heart icon has aria-hidden="true".

Does pressing Like switch to Liked?

No. The three rows are static samples. Keep a liked flag, and switch the button's variant, label, heart fill and aria-pressed from it.

How do I show 1.2k instead of 1234?

Format the number before you pass it, for example with Intl.NumberFormat and notation: "compact". The group doesn't format it for you.

Do the rows share state?

No. Each group is one sample, stacked with gap-4.

API Reference

Button Group

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

Button

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

All 39 button group examples