Badge

Compact status label — and the read-only counterpart to Chip: no pointer affordances, no interaction. Four variants: default (brand), success, warning, danger. For neutral, non-status descriptors (category, role, region), use --default. Two sizes: medium (default, 16px icon slot) and small (12px icon slot). Use to label states (active, pending), counts, or categorize items. Optional leading dot via .lb-badge__dot (add .lb-badge__dot--pulse to make it pulse), or an icon via .lb-badge__icon for statuses like money flow.

a11y (built in): a badge is a plain <span> whose status word is real text, so the meaning never rides on color alone; the optional .lb-badge__icon is aria-hidden reinforcement, not the signal itself. The ambient .lb-badge__dot--pulse animation is dropped entirely under prefers-reduced-motion: reduce.

Usage: Pure CSS — a static <span class="lb-badge"> needs no init, dispatches no events and has no JS handle. The one live part is the icon slot: author it empty as <span class="lb-badge__icon" aria-hidden="true" data-lb-icon="…"></span> and the LB.init() sweep (self-runs on DOMContentLoaded once js/lb.js is on the page) fills in the SVG — text- and dot-only badges work with the stylesheets alone. For badges injected after boot, hydrate the new subtree with LB.initIcons(root); it is idempotent and skips already-filled slots.

Badge Demo