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>
Taille SM
<p class="fr-badge fr-badge--sm">Label badge SM</p>
Couleur personnalisée (Voir la section personnalisation.)
<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

Label badge

Label badge

Label badge

Label badge

Label badge

<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

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éments personnalisables
É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.