Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.
DocumentationLabel badge
<p class="fr-badge">Label badge</p>
Il est conseillé d'ajouter une balise span avec la classe fr-ellipsis à l'interieur du badge pour que celui ci reste sur une seule ligne, avec le texte coupé par des points de suspensions.
Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur
<p class="fr-badge">
<span class="fr-ellipsis">Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur</span>
</p>
Label badge
<p class="fr-badge fr-badge--success">Label badge</p>
<p class="fr-badge fr-badge--success fr-badge--no-icon">Label badge</p>
Label badge
<p class="fr-badge fr-badge--error">Label badge</p>
<p class="fr-badge fr-badge--error fr-badge--no-icon">Label badge</p>
Label badge
<p class="fr-badge fr-badge--info">Label badge</p>
<p class="fr-badge fr-badge--info fr-badge--no-icon">Label badge</p>
Label badge
<p class="fr-badge fr-badge--warning">Label badge</p>
<p class="fr-badge fr-badge--warning fr-badge--no-icon">Label badge</p>
Label badge
<p class="fr-badge fr-badge--new">Label badge</p>
<p class="fr-badge fr-badge--new fr-badge--no-icon">Label badge</p>
Label badge
<p class="fr-badge fr-badge--green-menthe">Label badge</p>
Label badge
<p class="fr-badge fr-badge--orange-terre-battue">Label badge</p>
Label badge
<p class="fr-badge fr-badge--purple-glycine">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm fr-badge--success">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm fr-badge--error">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm fr-badge--info">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm fr-badge--warning">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm fr-badge--new">Label badge</p>
Label badge
<p class="fr-badge fr-badge--sm fr-badge--purple-glycine">Label badge</p>
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
<ul class="fr-badge-group">
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
<li>
<p class="fr-badge">Label badge</p>
</li>
</ul>
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
Label badge
<ul class="fr-badge-group">
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm">Label badge</p>
</li>
</ul>