Badge

Numeric count badge. Caps display at 9+ for large counts. Renders nothing when count is 0 or negative.

Features

Caps display at 9+ for large counts.

Renders nothing when count is 0 or negative.

Raw count exposed via data-count attribute.

Example

Anatomy


import { Badge } from '@wire-ui/react'
 
<Badge count={3} />

Styling

Badge renders as a <span> with data-count holding the raw numeric value. It displays “9+” when count exceeds 9 and renders nothing for 0 or negative.


<Badge count={12} className="
  rounded-full bg-black text-white text-xs font-bold px-1.5 py-0.5
" />

Using data attributes

Badge sets data-count with the raw numeric value, even when the display shows “9+”.


/* Style based on count threshold */
[data-count] { background: #000; color: #fff; }

Props

Prop	Type	Description
`count`	`number`	The count to display
`...rest`	`HTMLAttributes<HTMLSpanElement>`	Spread onto the `<span>`

Data attributes

Attribute	Description
`data-count`	The raw numeric value (always present, even when `9+` is displayed)