Pill

The inherited Ecology pill, wearing the CBFish skin. A compact, rounded tag with color variants, sizes, and an optional remove control; the primary variant picks up brand navy from --color-primary.

Inherited .astro import EsaPill from '@esa/ecology/esa-pill.astro';

Preview

Wetlands

<Pill label="Wetlands" variant="success" removable={false} />

Variants

Default Primary Success Warning Danger Info

<Pill label="Default" variant="default" removable={false} />
<Pill label="Primary" variant="primary" removable={false} />
<Pill label="Success" variant="success" removable={false} />
<Pill label="Warning" variant="warning" removable={false} />
<Pill label="Danger" variant="danger" removable={false} />
<Pill label="Info" variant="info" removable={false} />

Sizes

Extra small Small Medium Large

<Pill label="Extra small" size="xs" removable={false} />
<Pill label="Small" size="sm" removable={false} />
<Pill label="Medium" size="md" removable={false} />
<Pill label="Large" size="lg" removable={false} />

Removable

With removable (the default), a × button emits a removed event and removes the pill from the DOM.

Wetlands Overdue

<Pill label="Wetlands" variant="success" />
<Pill label="Overdue" variant="danger" />

API

Prop	Type	Default	Description
`label`	`string`	—	Required. Text shown inside the pill.
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Color intent — drives background, text, and border.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Pill height and text size.
`removable`	`boolean`	`true`	Shows a remove (×) button that emits a removed event.