Badge

Badge is a compact pill for statuses, counts, and meta labels. Surfaces follow semantic palettes (solid, outline, subtle). Deep import: kovax-react/badge.

Variants

Semantic colors

Variant × color

Each row is a variant; chips show every color. Default is variant="subtle" + color="neutral".

Sizes

Dot indicator

Inline with text

Accessibility: Badge is a <span> — not interactive. For removable filters use Button with appropriate labeling; for live counts pair with visible nearby context or aria-label on a parent.