Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Badges

Messages and Followers Button Group for React

A Messages button with a red unread badge, and Follow and Following buttons joined to a follower count.

Framework
UI library

Profile header controls. Messages carries a destructive Badge with the unread count on its corner. Follow and Following each sit beside a ButtonGroupText with the follower count; the Following button is filled and pressed, so the state is visible and announced.

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

How is the unread badge placed?

The Button has relative, and the Badge has absolute -end-1 -top-1, pill, size="sm" and variant="destructive". The logical -end-1 keeps it on the trailing corner in either reading direction.

How does Following differ from Follow?

It uses the default variant instead of outline, the label Following, and aria-pressed. Its count text is 2.4k instead of 2.4k followers.

Does Follow switch to Following?

No. The two groups are static samples. Keep a following flag and switch the variant, label and aria-pressed from it.

How is the unread count announced?

The badge text is inside the button, so it is read as Messages and 8. Set an aria-label such as Messages, 8 unread when you want a full phrase.

What about a large unread count?

The badge widens with its text. Cap it before you pass it, such as 99+, as the Notifications Button example does.

Do the three groups share state?

No. They are separate samples stacked with gap-4, and the numbers are written into the file.

All 39 button group examples