Composant · Données

FilterBar

Documenté

FilterBar regroupe des composants FilterPill dans une barre horizontale avec retour à la ligne. Elle offre un bouton optionnel « Tout effacer » câblé via `onClearAll`.

Exemples

Barre de filtres

Une FilterBar avec trois FilterPill actives et un bouton « Tout effacer ».

Barre de filtres

Pays France, Italie Statut Actif Date 2025-01-01

Voir le code (Svelte)

<FilterBar label="Filtres actifs">
  <FilterPill field="Pays" operator="in" value="France, Italie" active removable />
  <FilterPill field="Statut" value="Actif" active removable />
  <FilterPill field="Date" operator=">=" value="2025-01-01" active removable />
</FilterBar>

Sans bouton d'effacement

Omettez `onClearAll` pour masquer le bouton d'effacement global.

Sans bouton d'effacement

Type Import CSV Période T1 2025

Voir le code (Svelte)

<FilterBar label="Filtres appliqués">
  <FilterPill field="Type" value="Import CSV" active removable tone="info" />
  <FilterPill field="Période" value="T1 2025" active removable={false} />
</FilterBar>

API du composant

Prop	Type	Par défaut
`label`	`string`	requis
`onClearAll`	`() => void`	optionnel
`clearAllLabel`	`string`	`"Tout effacer"`
`children`	`Snippet`	optionnel
`class`	`string`	optionnel

Accessibilité

Le conteneur est un `<div role="group">` avec `aria-label`. Il isole les filtres actifs pour les utilisateurs de lecteur d'écran.

Notes d'usage

Placez des FilterPill comme enfants directs. Le `clearAllLabel` est personnalisable si votre contexte nécessite un libellé différent.

Tokens

--st-spacing-2
--st-semantic-text-link
--st-semantic-surface-subtle
--st-semantic-action-primaryHover
--st-semantic-border-interactive
--st-radius-md
--st-motion-fast
--st-motion-easing