Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Secondary

Button with Count (Secondary) for React

A muted button with a count beside the label, when a supporting action should show how many items it actually covers.

Framework
UI library

Secondary fill and a badge. The demo shows 3. The number should match what the button acts on, not sit there as decoration.

Use it for a quieter list action, like Archive selected, next to a stronger button. If the count is why people came, use the default Button. In React, the number is whatever you pass to the badge.

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

Is the 3 a live count?

No. The Badge children are the characters 3. Nothing in the demo reads a selection or updates the number. Pass your count as the badge's children.

How is the badge colored on a secondary button?

variant="secondary" is the quieter fill. The badge is variant="outline" and pill, a round outline on that fill.

Should I disable it when the count is 0?

When a delete with nothing selected shouldn't run, pass disabled yourself. The demo always shows 3 and stays enabled. Hide the button only when that action isn't part of the screen.

How do I show singular and plural?

The badge is only the number. Put the noun on the button, such as Delete, or write the whole phrase as the button's children. This demo doesn't pick a plural form for you.

What if the number is long?

The badge sizes to its text, so 1482 widens the button. Format the children before you pass them if you want a shorter label, such as 99+. The component won't abbreviate them.

How is the count announced?

The badge text is inside the button, so this demo is announced as its label plus 3. Set aria-label on the button, such as Delete 3 items, when the visible words aren't a full phrase.

All 35 button examples