Skip to content

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

Free

Circular Badge with Count (Standard) for Ark UI

A round default badge showing the number 3 in the primary color, for a notification count or a quantity.

The badge is a circle with the number 3 on the primary fill. One digit is all this demo shows.

Use it for unread messages, a cart count, or pending tasks. A pressable count fits a Button better. In React, Ark UI keeps one digit in a circle at this size.

Preview

Preview width
3

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

Badge anatomy: root, icon, text

Usage

<Badge pill size="lg">
  3
</Badge>

FAQ

How does the number become a circle in React?

pill sets rounded-full, and size="lg" adds h-6.5 and min-w-6.5, so one digit has a matching height and minimum width. A longer number widens past that minimum.

Which variant is this count?

No variant is set, so the count uses the default fill. secondary, outline and destructive are the other looks in this set. info, success and warning are available too.

How do I make the number make sense to a screen reader?

A bare number does not say what is counted. Put the noun in the badge, such as 3 unread, or set aria-label to 3 unread messages.

How do I make the circle smaller?

size also takes sm, which sets h-5 and min-w-5. Keep pill so the ends stay round.

Is the count a button?

No. The count is the text of a span. Place the badge next to the thing it counts. A control that does something is a Button.

Where do I put the number?

The digits are the badge text, 3 in this demo. Replace that text with the count you want to show.

API Reference

Badge

Sets pill and size="lg". The rest is on the Badge page.

All 20 badge examples