Badge - Badge
Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.
Le badge n’est pas un composant ‘cliquable’. Il doit être associé à une information donnée sur une page pour préciser le statut ou l'état associée à cette information.
Structure
Badge par défaut
La composant badge est composée de :
- un bloc en ligne avec un léger radius - obligatoire
- un fond de couleur (couleur claire) - obligatoire
- un texte de couleur (couleur foncée), en majuscule - obligatoire, à adapter en fonction du contexte pour donner la nature de l'état ou du status. Voir les couleurs de personnalisation.
Le composant badge est disponible en deux tailles, SM et MD , à utiliser en fonction de l’espace disponible.
Label badge
Label badge SM
Label badge
<p class="fr-badge">Label badge</p>
<p class="fr-badge fr-badge--sm">Label badge SM</p>
<p class="fr-badge fr-badge--green-menthe">Label badge</p>
Badge système (avec icône optionnelle)
Cette variante peut être utilisée pour préciser l’information donnée par le texte du badge. Elle doit être obligatoirement et uniquement utilisée quand les couleurs ‘fonctionnelles’ sont utilisées.L’icône système est optionnelle.
Label badge
Label badge
Label badge
Label badge
Label badge
<p class="fr-badge fr-badge--success">Label badge</p>
<p class="fr-badge fr-badge--error">Label badge</p>
<p class="fr-badge fr-badge--info">Label badge</p>
<p class="fr-badge fr-badge--warning">Label badge</p>
<p class="fr-badge fr-badge--new">Label badge</p>
Badges systèmes sans icône
<p class="fr-badge fr-badge--success fr-badge--no-icon">Label badge</p>
<p class="fr-badge fr-badge--error fr-badge--no-icon">Label badge</p>
<p class="fr-badge fr-badge--info fr-badge--no-icon">Label badge</p>
<p class="fr-badge fr-badge--warning fr-badge--no-icon">Label badge</p>
<p class="fr-badge fr-badge--new fr-badge--no-icon">Label badge</p>
Badges systèmes SM
Label badge
Label badge
Label badge
<p class="fr-badge fr-badge--success fr-badge--sm fr-badge--no-icon">Label badge</p>
<p class="fr-badge fr-badge--error fr-badge--sm fr-badge--no-icon">Label badge</p>
<p class="fr-badge fr-badge--info fr-badge--sm">Label badge</p>
<p class="fr-badge fr-badge--warning fr-badge--sm">Label badge</p>
<p class="fr-badge fr-badge--new fr-badge--sm">Label badge</p>
À faire
Utiliser l’icône et la couleur système correspondantes à l’information
À ne pas faire
Utiliser une icône dans un badge standard
-
Label badge
-
Label badge
-
Label badge
-
Label badge
<ul class="fr-badge-group">
<li>
<p class="fr-badge fr-badge--success">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--blue-ecume">Label badge</p>
</li>
</ul>
<!-- SM -->
<ul class="fr-badge-group">
<li>
<p class="fr-badge fr-badge--sm fr-badge--success">Label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--sm fr-badge--blue-ecume">Label badge</p>
</li>
</ul>
Règles d’utilisation
Pour catégoriser, classer, organiser des contenus à l'aide de mots-clés, utiliser plutôt le composant tag.
Le badge doit être placé directement à côté et à la suite de l’élément qu’il illustre. Exemples :
- badge associé à du texte ou un lien,
- badge associé à des cartes ou des tuiles,
- badge dans une cellule d’un tableau,
- badge dans des éléments de navigation.
Accessibilité
- Toujours utiliser la balise <p>, ou un <span> si celui-ci est à l'intérieur d'un <p>
- Éviter l’utilisation de lettre capitale (préférer l’ajout d’une classe css)
- Vérifier le bon ratio de contraste entre la couleur du texte et la couleur de fond
Personnalisation
Il est possible d’utiliser les couleurs illustratives sur les badges ‘standard’ uniquement
Élément | Valeur(s) autorisée(s) | |
---|---|---|
Token | Classe css | |
Fond | $[couleur]-950 (thème clair) $[couleur]-100 (thème sombre) exemples : green-emeraude-main-950 / green-emeraude-main-100 brown-caramel-main-950 / brown-caramel-main-100 |
.fr-badge--[couleur] .fr-badge--green-emeraude .fr-badge--brown-caramel .fr-badge--purple-glycine |
Texte | $[couleur]-sun (thème clair) $[couleur]-moon (thème sombre) exemples: green-emeraude-sun-425 / green-emeraude-moon-753 brown-caramel-425 / brown-caramel-moon-901 |
Besoin d'aide ?
L’équipe du DSFR est là pour vous aider.