docs / core / badge

Badge

the status of the thing it sits on. six semantic tones as soft pills, a mono variant for versions and keys, and a pulsing live state. it labels, it never clicks; a clickable pill is Chip.

intensity · recedesrsc · server

provenance

shaped from sisu-plus

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

sits in Card headers, table rows, list items, next to a titlemono for machine values: versions, ids, env namesno onClick, no dismiss. interaction makes it a Chipnot a counter on an icon. that is NotificationBadge

a11y

plain text in a span · the live dot is aria-hiddenjest-axe

dependencies

class-variance-authority
live demo · try it out
Passing
customize
tonesemantic color role
labelthe text inside
monouppercase tag for versions, keys
livepulsing green, overrides tone
usagecopy
import { Badge } from "@usva-ui/react/primitives/badge";

<Badge tone="success">Passing</Badge>

props

proptypedefaultnotes
tone"neutral" | "accent" | "accent-alt" | "success" | "warning" | "danger""neutral"semantic color role, rendered as a soft pill.
monobooleanfalsean uppercase monospace tag, for versions, keys and metadata.
liveboolean—the live green with a pulsing dot. overrides tone.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Badge } from "@usva-ui/react/primitives/badge";

<Badge tone="accent">New</Badge>
<Badge tone="success">Passing</Badge>
<Badge tone="accent-alt" mono>v1.0.0</Badge>