Composant · Données

FilterPill

Documenté

FilterPill représente un filtre actif sous forme de pilule. Elle affiche un champ, un opérateur optionnel et la valeur sélectionnée, avec un bouton de retrait accessible.

Exemples

Tonalités

Cinq tonalités sémantiques alignées sur les feedback tokens : neutral (défaut), success, warning, error, info.

Tonalités

Pays France Statut Validé Quota Élevé Erreur 404 Type Info

Voir le code (Svelte)

<FilterPill field="Pays" value="France" tone="neutral" active removable />
<FilterPill field="Statut" value="Validé" tone="success" active removable />
<FilterPill field="Quota" value="Élevé" tone="warning" active removable />
<FilterPill field="Erreur" value="404" tone="error" active removable />
<FilterPill field="Type" value="Info" tone="info" active removable />

États

Active (aria-pressed), inactive, disabled. L'état disabled réduit l'opacité et désactive les interactions.

États

Pays France, Italie, Espagne Statut Actif Région Nord

Voir le code (Svelte)

<FilterPill
  field="Pays"
  operator="in"
  value="France, Italie, Espagne"
  active
  removable
/>
<FilterPill field="Statut" value="Actif" active={false} removable />
<FilterPill field="Région" value="Nord" active removable disabled />

Sans bouton de retrait

Passez removable={false} pour masquer le bouton ✕.

Sans bouton de retrait

Période 2025-01-01 Source Import CSV

Voir le code (Svelte)

<FilterPill
  field="Période"
  operator=">="
  value="2025-01-01"
  active
  removable={false}
/>
<FilterPill
  field="Source"
  value="Import CSV"
  active
  removable={false}
  tone="info"
/>

API du composant

Prop	Type	Par défaut
`field`	`string`	requis
`value`	`string`	requis
`operator`	`string`	optionnel
`active`	`boolean`	`true`
`removable`	`boolean`	`true`
`disabled`	`boolean`	`false`
`tone`	`"neutral" \| "success" \| "warning" \| "error" \| "info"`	`"neutral"`
`onClick`	`() => void`	optionnel
`onRemove`	`() => void`	optionnel
`class`	`string`	optionnel

Accessibilité

Le conteneur est un `<span role="group">` non focusable. Le corps est un `<button aria-pressed>` et le bouton de retrait a un `aria-label` explicite. Suppr/Backspace sur le corps déclenche `onRemove`.

Notes d'usage

Utilisez FilterBar pour regrouper plusieurs FilterPill avec un bouton « Tout effacer ». Câblez `onRemove` dans l'état de votre application pour retirer le filtre.

Tokens

--st-radius-pill
--st-semantic-surface-subtle
--st-semantic-text-secondary
--st-semantic-border-interactive
--st-semantic-action-primary
--st-semantic-feedback-success
--st-semantic-feedback-warning
--st-semantic-feedback-error
--st-semantic-feedback-info
--st-component-filterPill-activeBackground
--st-component-filterPill-activeText
--st-motion-fast
--st-motion-easing