Pill

Compact, rounded tag with color variants, sizes, an optional leading icon, and an optional remove control.

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} />

Icon & removable

Pass a leading icon via the icon slot. With removable (the default), a × button emits a removed event and removes the pill from the DOM.

Tagged Wetlands Overdue

<Pill label="Tagged" variant="primary" removable={false}>
  <svg slot="icon">…</svg>
</Pill>
<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.

Slots

Prop	Type	Default	Description
`icon`	`slot`	—	Leading inline SVG, rendered left of the label.

Events

Prop	Type	Default	Description
`removed`	`CustomEvent`	—	Bubbles when the remove button is clicked; the pill then removes itself from the DOM.