Badge
Le badge est un élément d’indication permettant de valoriser une information liée à un élément précis du site.
HTML
Structure du composant
Le composant Badge est un élément visuel destiné à fournir des informations contextuelles ou des indicateurs d'état. Sa structure est la suivante :
-
Le Badge est un élément HTML
<p>avec la classefr-badge. - Son contenu est textuel et doit être succinct (exemple : "Libellé badge").
Exemple de structure HTML
<p class="fr-badge">Libellé badge</p>Groupe de badges
Lorsque plusieurs badges sont utilisés ensemble, ils doivent être
regroupés dans un conteneur, de classe
fr-badges-group, afin de
maintenir une cohérence visuelle et fonctionnelle.
<ul class="fr-badges-group">
<li>
<p class="fr-badge">Badge 1</p>
</li>
<li>
<p class="fr-badge">Badge 2</p>
</li>
</ul>CSS
Installation du CSS
Pour fonctionner correctement, les styles CSS du core et des
badges doivent être importés. L'import doit se faire avant le
contenu de la page dans la partie
<head>, et de
préférence avec le fichier minifié, car plus léger.
<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/badge/badge.min.css" rel="stylesheet">
NB : Il est aussi possible d'importer le CSS global du DSFR
dsfr.min.css.
Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :
<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/badge/badge.legacy.min.css" rel="stylesheet">Variantes systèmes
Les badges systèmes peuvent avoir des styles définis pour
différents status. Pour appliquer une variante système, ajoutez
une des classes suivantes à l'élément
<p class="fr-badge">
:
-
fr-badge--info: Indique une information. -
fr-badge--warning: Indique un avertissement. -
fr-badge--error: Indique une erreur. -
fr-badge--success: Indique un succès. -
fr-badge--new: Indique une nouveauté
Les badges système sont liés à une icône, celle-ci n'est pas
modifiable mais peut être retirée. Pour cela utilisez la classe :
fr-badge--no-icon
Exemples de badges systèmes
<p class="fr-badge fr-badge--info">Information</p>
<p class="fr-badge fr-badge--warning">Avertissement</p>
<p class="fr-badge fr-badge--error">Erreur</p>
<p class="fr-badge fr-badge--success">Succès</p>
<p class="fr-badge fr-badge--new">Nouveau</p>Variantes d'accentuation
Les badges sont disponibles dans toutes les couleurs
d'accentuation via la classe :
fr-badge--NOM-COULEUR.
Retrouver la liste des couleurs d'accentuation sur la
page couleurs
.
Exemples de badges systèmes
<p class="fr-badge fr-badge--yellow-moutarde">intitulé</p>
<p class="fr-badge fr-badge--green-menthe">intitulé</p>Variantes de taille
Les badges peuvent être affichés dans deux tailles différentes. Par défaut, la taille standard est utilisée, mais il est possible d'ajouter la classe suivante pour ajuster la taille :
-
fr-badge--sm: Petit badge.
Exemples de tailles de badges
<p class="fr-badge fr-badge--sm">Petit badge</p>
<p class="fr-badge">Badge moyen</p>JavaScript
Le composant Badge ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.