DSFR v1.13.1
Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.
DocumentationLibellé badge
<p id="badge-1103" class="fr-badge">Libellé 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.
Libellé badge très long, coupé par des points de suspensions lorsque le Libellé dépasse la largeur du conteneur
<p class="fr-badge">
<span class="fr-ellipsis">Libellé badge très long, coupé par des points de suspensions lorsque le Libellé dépasse la largeur du conteneur</span>
</p>
Libellé badge
<p id="badge-1106" class="fr-badge fr-badge--success">Libellé badge</p>
<p id="badge-1108" class="fr-badge fr-badge--success fr-badge--no-icon">Libellé badge</p>
Libellé badge
<p id="badge-1110" class="fr-badge fr-badge--error">Libellé badge</p>
<p id="badge-1112" class="fr-badge fr-badge--error fr-badge--no-icon">Libellé badge</p>
Libellé badge
<p id="badge-1114" class="fr-badge fr-badge--info">Libellé badge</p>
<p id="badge-1116" class="fr-badge fr-badge--info fr-badge--no-icon">Libellé badge</p>
Libellé badge
<p id="badge-1118" class="fr-badge fr-badge--warning">Libellé badge</p>
<p id="badge-1120" class="fr-badge fr-badge--warning fr-badge--no-icon">Libellé badge</p>
Libellé badge
<p id="badge-1122" class="fr-badge fr-badge--new">Libellé badge</p>
<p id="badge-1124" class="fr-badge fr-badge--new fr-badge--no-icon">Libellé badge</p>
Libellé badge
<p id="badge-1126" class="fr-badge fr-badge--green-menthe">Libellé badge</p>
Libellé badge
<p id="badge-1128" class="fr-badge fr-badge--orange-terre-battue">Libellé badge</p>
Libellé badge
<p id="badge-1130" class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
Libellé badge
<p id="badge-1133" class="fr-badge fr-badge--sm">Libellé badge</p>
Libellé badge
<p id="badge-1135" class="fr-badge fr-badge--sm fr-badge--success">Libellé badge</p>
Libellé badge
<p id="badge-1137" class="fr-badge fr-badge--sm fr-badge--error">Libellé badge</p>
Libellé badge
<p id="badge-1139" class="fr-badge fr-badge--sm fr-badge--info">Libellé badge</p>
Libellé badge
<p id="badge-1141" class="fr-badge fr-badge--sm fr-badge--warning">Libellé badge</p>
Libellé badge
<p id="badge-1143" class="fr-badge fr-badge--sm fr-badge--new">Libellé badge</p>
Libellé badge
<p id="badge-1145" class="fr-badge fr-badge--sm fr-badge--purple-glycine">Libellé badge</p>
Lorsque que l'on a plus d'un badge, il convient d'utiliser un groupe de badges.
La taille de tous les badges peut être définie au niveau du groupe.
Libellé badge 1
Libellé badge 2
Libellé badge 3
Libellé badge 4
Libellé badge 5
Libellé badge 6
Libellé badge 7
Libellé badge 8
Libellé badge 9
<ul class="fr-badges-group">
<li>
<p id="badge-1147" class="fr-badge">Libellé badge 1</p>
</li>
<li>
<p id="badge-1148" class="fr-badge">Libellé badge 2</p>
</li>
<li>
<p id="badge-1149" class="fr-badge">Libellé badge 3</p>
</li>
<li>
<p id="badge-1150" class="fr-badge">Libellé badge 4</p>
</li>
<li>
<p id="badge-1151" class="fr-badge">Libellé badge 5</p>
</li>
<li>
<p id="badge-1152" class="fr-badge">Libellé badge 6</p>
</li>
<li>
<p id="badge-1153" class="fr-badge">Libellé badge 7</p>
</li>
<li>
<p id="badge-1154" class="fr-badge">Libellé badge 8</p>
</li>
<li>
<p id="badge-1155" class="fr-badge">Libellé badge 9</p>
</li>
</ul>
Libellé badge 1
Libellé badge 2
Libellé badge 3
Libellé badge 4
Libellé badge 5
Libellé badge 6
Libellé badge 7
Libellé badge 8
Libellé badge 9
<ul class="fr-badges-group fr-badges-group--sm">
<li>
<p id="badge-1157" class="fr-badge">Libellé badge 1</p>
</li>
<li>
<p id="badge-1158" class="fr-badge">Libellé badge 2</p>
</li>
<li>
<p id="badge-1159" class="fr-badge">Libellé badge 3</p>
</li>
<li>
<p id="badge-1160" class="fr-badge">Libellé badge 4</p>
</li>
<li>
<p id="badge-1161" class="fr-badge">Libellé badge 5</p>
</li>
<li>
<p id="badge-1162" class="fr-badge">Libellé badge 6</p>
</li>
<li>
<p id="badge-1163" class="fr-badge">Libellé badge 7</p>
</li>
<li>
<p id="badge-1164" class="fr-badge">Libellé badge 8</p>
</li>
<li>
<p id="badge-1165" class="fr-badge">Libellé badge 9</p>
</li>
</ul>