Prototype Library

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.

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

PropTypeDefaultDescription
gap 'small' | 'medium' | 'large' 'small' Spacing between pills.

Slots

PropTypeDefaultDescription
default slot — Any number of pills (or other inline tags) to lay out.

Accessibility

  • A layout primitive only — adds no roles or semantics of its own.
  • If the pills represent a set of filters or selections, give the wrapper an aria-label or group role at the call site.