Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Button with Count (Link) for React

A link-styled button with a count beside the label, when a quiet action should show how many items it actually covers.

Framework
UI library

The link variant, plus a badge with a number. The demo shows 3. If the number's meaning is not obvious, say it in the label.

Use it for View comments or Open cart when the count helps and the action is small. If the number is the whole point, a Badge on its own is enough. In React, Base UI does not know the count. You pass it.

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

Does the badge track a selection?

No. The number 3 is the Badge children, written in the demo. Render your own count there when the selection changes.

How is this different from a filled button with a count?

variant="link" is primary text, no fill, underline on hover. The badge is variant="secondary" and pill, so the count reads as a small chip after the label.

How do I make it open a page in React?

Pass your link with render, such as render={<a href="/pricing" />}.

Keep the badge as a child if the count should travel with the link.

What should I do when the count is 0?

Pass disabled if the action shouldn't run empty. Or skip rendering the button. The demo does neither: it always shows 3.

Where does the noun go?

In the button's text. The badge is the number only, and this demo doesn't pluralize. Delete, with 3 in the badge, is enough when the context is a selection.

What will a screen reader say?

The label and the badge text, because both are inside the button. The demo is Button, then 3. An aria-label like Delete 3 messages replaces that when you need a full phrase.

All 35 button examples