Tag

Mot-clé ou filtre affiché comme une pastille ; peut être statique, lien ou bouton. Variantes sémantiques et tag fermable pour les facettes de recherche.

Exemple

Administration

<span class="bj-tag">Administration</span>

Variantes

DéfautAction (lien)InfoSuccèsAttentionErreurPetit

Filtre actif

<div class="bj-tags">
  <span class="bj-tag bj-tag--action">…</span>
</div>
<span class="bj-tag bj-tag--dismiss">
  Filtre
  <button type="button" class="bj-tag__close" aria-label="Retirer le filtre">…</button>
</span>

Éléments HTML

SpanLien (a)

<span class="bj-tag">…</span>
<a href="#" class="bj-tag">…</a>
<button type="button" class="bj-tag">…</button>

Tailles

DéfautActionInfoSuccèsAttentionErreur

md (défaut)

DéfautActionInfoSuccèsAttentionErreur

<!-- sm puis md pour chaque variante -->
<span class="bj-tag bj-tag--sm">Défaut</span>
<span class="bj-tag">Défaut</span>

Tags fermables

Défaut Action Info Succès Attention Erreur

<span class="bj-tag bj-tag--dismiss">
  Filtre
  <button type="button" class="bj-tag__close" aria-label="Retirer le filtre">…</button>
</span>

Combinaisons

Défaut Action Info Succès Attention Erreur

<span class="bj-tag bj-tag--sm bj-tag--dismiss bj-tag--info">
  …
  <button type="button" class="bj-tag__close" aria-label="…">…</button>
</span>

Liste de tags

PublicPrioritaireBrouillonValidéEn attenteRejetéCompact

<div class="bj-tags" role="list">
  <span class="bj-tag" role="listitem">…</span>
  <span class="bj-tag bj-tag--action" role="listitem">…</span>
</div>

Classes CSS

Classe	Description
`bj-tag`	Tag neutre ; peut être span, a ou button.
`bj-tag--action`	Style lié à la couleur d’action.
`bj-tag--info … bj-tag--error`	Variantes sémantiques (info, succès, avertissement, erreur).
`bj-tag--sm`	Tag compact.
`bj-tag--dismiss`	Ajuste le padding pour accueillir le bouton de fermeture.
`bj-tag__close`	Bouton icône pour retirer le tag.
`bj-tags`	Conteneur flex wrap pour une liste de tags.

Tag