Prototype Library

Filter Pills

Active filters rendered as removable chips. Each chip shows "label: displayValue" and an x button that dispatches a bubbling esa-filter-remove event carrying { name, value }.

Inherited .astro import EsaFilterPills from '@esa/ecology/esa-filter-pills.astro';

Preview

Pass the current active filters; each becomes a removable chip.

Status:OpenStatus:In reviewDepartment:Water Quality
<FilterPills filters={[
  { name: 'status', label: 'Status', value: 'open', displayValue: 'Open' },
  { name: 'status', label: 'Status', value: 'review', displayValue: 'In review' },
  { name: 'dept', label: 'Department', value: 'water', displayValue: 'Water Quality' },
]} />

States

A single chip renders inline; with no filters the component renders nothing at all — matching the Angular @if (activeFilters().length > 0) guard.

Priority:High
<FilterPills filters={[
  { name: 'priority', label: 'Priority', value: 'high', displayValue: 'High' },
]} />

<!-- Empty: renders no DOM -->
<FilterPills filters={[]} />

API

PropTypeDefaultDescription
filters ActiveFilter[] [] Active filters to render. Each is { name, label, value, displayValue }. Empty renders no DOM.

Events

PropTypeDefaultDescription
esa-filter-remove { name, value } — Bubbling/composed. Fires when a chip's remove button is clicked, identifying which filter to drop.

Accessibility

  • Each chip carries an aria-label of "label: displayValue" so the pairing is announced as one unit.
  • Remove buttons are native <button>s with an explicit "Remove {label} {displayValue}" accessible name.
  • Remove buttons show a visible focus ring via --focus-ring-* tokens.