Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Standard

Button with Count (Standard) for React

A filled button with a count beside the label, when the main action applies to more than one selected item at once.

Framework
UI library

The default button, with a badge showing how many. The demo hard-codes 3. In a real list, that number comes from the selection.

Use it for Checkout or Delete selected, so people see the size of the action before they press. If there is nothing to count, use a plain Button. In React, the button just renders the badge you put inside.

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 the primary button?

The button is the default variant, primary fill and primary text. pill rounds the badge, and bg-primary-foreground/20 with text-primary-foreground keeps the number readable 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