Pillbox

A flex-wrap container that lays out a collection of pills with a configurable gap. Purely presentational — it owns layout, the pills own their appearance and behavior.

Stable .astro import EsaPillbox from '@esa/ecology/esa-pillbox.astro';

Preview

Wetlands Air quality Overdue Permitting Stormwater

<Pillbox gap="small">
  <Pill label="Wetlands" variant="success" removable={false} />
  <Pill label="Air quality" variant="info" removable={false} />
  <Pill label="Overdue" variant="danger" removable={false} />
</Pillbox>

Gaps

Small gap Air quality Overdue

Medium gap Air quality Overdue

Large gap Air quality Overdue

<Pillbox gap="small">…</Pillbox>
<Pillbox gap="medium">…</Pillbox>
<Pillbox gap="large">…</Pillbox>

Wrapping

Pills wrap to a new row when they exceed the container width. Pillbox is agnostic to pill behavior — removable pills work as-is.

Endangered species Water rights Coastal NEPA review Habitat restoration Discharge permit

<div style="max-width: 360px;">
  <Pillbox gap="small">…many pills…</Pillbox>
</div>

API

Prop	Type	Default	Description
`gap`	`'small' \| 'medium' \| 'large'`	`'small'`	Spacing between pills.

Slots

Prop	Type	Default	Description
`default`	`slot`	—	Any number of pills (or other inline tags) to lay out.

Accessibility

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Role	Re-point	Reach
`.typography-label-md`	`--typography-label-md-font-family` 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans `--typography-label-md-font-size` clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --font-size-200 `--typography-label-md-font-weight` 500 via --typography-font-weight-medium → --font-weight-500 `--typography-label-md-letter-spacing` 0.01em via --letter-spacing-default `--typography-label-md-line-height` 1.6 via --line-height-normal	+33 more components esa-app-bar, esa-breadcrumbs, esa-button-group, esa-button-toggle, esa-card, esa-checkbox-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-empty-state, esa-entity-search, esa-file-upload, esa-filter-container, esa-form-field, esa-header-nav, esa-input-tag, esa-link-column, esa-page-header, esa-popover, esa-progress-bar, esa-radio-group, esa-range-slider, esa-select, esa-side-dialog, esa-sidebar-nav, esa-stat, esa-text-field, esa-textarea, esa-tooltip

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.

Token	Reach	Resolves to
`--spacing-100`	primitive every component	`0.25rem`
`--spacing-200`	primitive every component	`0.5rem`
`--spacing-300`	primitive every component	`0.75rem`