Skip to content

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

Free

Circular Badge with Count (Destructive) for Vue

A round destructive badge showing the number 3, for an error count or another urgent tally.

UI library: Ark UI

The badge is a circle with the number 3, in the destructive color. One digit keeps it round. There is no word beside the number.

Use it for failed items or critical alerts where the count itself is the message. If the number should be pressed, put it on a Button. In Vue, Ark UI rounds it fully at this size.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Badge anatomy: root, icon, text

Usage

<Badge :pill="true" size="lg" variant="destructive">3</Badge>

FAQ

How does the number become a circle in Vue?

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.

What does variant destructive change on the circle?

variant="destructive" sets text-destructive on bg-destructive/10, including on this circle. dark:bg-destructive/20 is the dark tint.

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, size="lg" and variant="destructive". The rest is on the Badge page.

All 20 badge examples