Badge

The inherited Ecology badge, wearing the CBFish skin. A small pill for counts, statuses, and labels; the primary variant picks up brand navy from --color-primary.

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

Prop	Type	Default	Description
`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.