Badge

Preview

<Badge value="New" />

Variants

<Badge value="Primary" variant="primary" />
<Badge value="Secondary" variant="secondary" />
<Badge value="Success" variant="success" />
<Badge value="Warning" variant="warning" />
<Badge value="Danger" variant="danger" />
<Badge value="Info" variant="info" />

Sizes

<Badge value="3" size="xs" />
<Badge value="9" size="sm" />
<Badge value="42" size="md" />
<Badge value="128" size="lg" />

Dot mode

With dot, the badge collapses to an 8px circle — useful as an inline status indicator next to a label.

<Badge dot variant="success" />
<Badge dot variant="warning" />
<Badge dot variant="danger" />

API

Accessibility

• Purely presentational — pair with adjacent visible text so the count or status has a label.
• Dot mode has no text content; convey its meaning through surrounding copy or an aria-label on the wrapper.
• Color is not the only signal where possible — prefer text counts over color alone.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.