Badge

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

Preview

Usage


import { Badge } from '@wire-ui/react'
 
<Badge count={3} />   // renders "3"
<Badge count={12} />  // renders "9+"
<Badge count={0} />   // renders nothing

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)