Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Badges

Like with Count Button Group for React

A like button joined to its count, shown with a label, icon-only and in the filled liked state.

Framework
UI library

A like button with its count attached. ButtonGroupText holds the number and shares the button's border, so the pair reads as one control. The three rows are the labeled button, the icon-only button and the liked state, a filled button with a filled heart.

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

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.

All 39 button group examples