Badge

Étiquette compacte en capitales pour un statut, une catégorie ou une nouveauté. Peut inclure une icône via la classe utilitaire bj-icon.

Exemple

En vigueur

<span class="bj-badge">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm"></i> En vigueur
</span>

Variantes

Neutre InfoSuccèsAttentionErreurNouveauTrès petit

<span class="bj-badge bj-badge--info">…</span>
<span class="bj-badge bj-badge--success">…</span>
<span class="bj-badge bj-badge--new">Nouveau</span>
<span class="bj-badge bj-badge--sm">…</span>

Tailles

NeutreInfoSuccèsAttentionErreurNouveau

md (défaut)

NeutreInfoSuccèsAttentionErreurNouveau

<!-- sm : les 6 variantes -->
<span class="bj-badge bj-badge--sm">Neutre</span>
<span class="bj-badge bj-badge--info bj-badge--sm">Info</span>
<!-- … success, warning, error, new -->
<!-- md (défaut) : mêmes variantes sans bj-badge--sm -->
<span class="bj-badge">Neutre</span>
<span class="bj-badge bj-badge--info">Info</span>

Avec icône

Neutre Info Succès Attention Erreur Nouveau

<span class="bj-badge"><i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true"></i> Neutre</span>
<span class="bj-badge bj-badge--info"><i class="ri-information-line bj-icon bj-icon--sm" aria-hidden="true"></i> Info</span>
<span class="bj-badge bj-badge--success"><i class="ri-checkbox-circle-line bj-icon bj-icon--sm" aria-hidden="true"></i> Succès</span>

Sans icône

Texte seul (icône masquée)

<span class="bj-badge bj-badge--no-icon">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true"></i>
  Texte seul
</span>

Combinaisons variantes × tailles

NeutreInfoSuccèsAttentionErreurNouveausmNeutreInfoSuccèsAttentionErreurNouveaumdNeutreInfoSuccèsAttentionErreurNouveau

<!-- Grille 6 variantes × 2 tailles (sm / md) -->
<span class="bj-badge bj-badge--info bj-badge--sm">Info</span>
<span class="bj-badge bj-badge--info">Info</span>

Classes CSS

Classe	Description
`bj-badge`	Style neutre : fond gris léger, texte par défaut.
`bj-badge--info`	Fond et texte sémantiques « information ».
`bj-badge--success`	Validation ou état positif.
`bj-badge--warning`	Mise en garde.
`bj-badge--error`	Erreur ou rejet.
`bj-badge--new`	Mise en avant forte (fond vert action, texte blanc).
`bj-badge--sm`	Taille réduite pour zones denses.
`bj-badge--no-icon`	Masque les enfants bj-icon si présents.