Skip to content

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

Free

Button with Count (Link) for Ark UI

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

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, Ark 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

Anatomy

Button anatomy: root, icon, text

Usage

<Button variant="link">
  Button
  <Badge pill variant="secondary">
    3
  </Badge>
</Button>

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 asChild and put an a or your router's link inside. The button's styles move onto the link.

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.

API Reference

Button

Sets variant="link". The rest is on the Button page.

Badge

Sets pill and variant="secondary". The rest is on the Badge page.

All 35 button examples