Pill

Preview

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

Variants

<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

<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.

<Pill label="Tagged" variant="primary" removable={false}>
  <svg slot="icon">…</svg>
</Pill>
<Pill label="Wetlands" variant="success" />
<Pill label="Overdue" variant="danger" />

API

Slots

Events

Accessibility

• The remove button has aria-label="Remove"; the leading icon is aria-hidden.
• Remove click stopPropagation()s so it won't trigger a click on a surrounding interactive container.
• Color intent is reinforced by the label text — color is never the only signal.

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.