Badges


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.

 

1 <p class="fr-badge">Label badge</p>


Taille SM

1 <p class="fr-badge fr-badge--sm">Label badge SM</p>


Couleur personnalisée
Voir la section personnalisation.

1 <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.


Badges systèmes

1 2 3 4 5 6 7 8 9 <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

1 2 3 4 5 6 7 8 9 <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

1 2 3 4 5 6 7 8 9 <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 personnalisable

Groupes de badges

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <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

 

À faire - Placer le badge directement à coté de l'élément qu’il illustre

À ne pas faire - Utiliser le badge pour catégoriser un contenu

 


Accessibilité

  • Toujours utiliser la balise 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)

É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-tag--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

Voir l’ensemble des couleurs illustratives à disposition