Filter Pills

Preview

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

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

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

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

API

Events

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.

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.