Prototype Library

Badge

A small pill for counts, statuses, and labels. Six color intents, three sizes, plus a dot mode for compact status indicators.

Inherited .astro import EsaBadge from '@esa/ecology/esa-badge.astro';

Preview

New 
<Badge value="New" />

Variants

Primary Secondary Success Warning Danger Info 
<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

3 9 42 128 
<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

PropTypeDefaultDescription
value string | number — Text or count shown inside the badge. Ignored in dot mode.
variant 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' 'primary' Background color intent.
size 'xs' | 'sm' | 'md' | 'lg' 'md' Badge height and text size.
dot boolean false Renders a small status dot with no text.

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.