Inline status labels, tags, and counts accumulate inconsistent padding, color schemes, and sizing across dashboards and lists. Without a shared badge primitive, teams rediscover rounded-pill + color mapping on every surface, breaking when themes change and bloating the codebase with duplicated Tailwind classes.

Badge is a controlled Tailwind v4 span with three variants (solid, outline, soft), three sizes (sm, md, lg), optional color from the full palette, and an optional dot boolean to render a small circle indicator before text. All props extend HTMLAttributes<HTMLSpanElement>, and a data-react-fancy-badge attribute marks the element for stable selection.

Import from @particle-academy/react-fancy and render <Badge color="green" variant="soft" size="md" dot>Active</Badge>. Colors span the full palette (slate, gray, zinc, red, blue, purple, etc.); the component auto-selects contrasting text and dark-mode variants. Pass className to override generated Tailwind.