Conseils
Un badge est un marqueur visuel qui peut être utilisé pour indiquer un statut, un nombre d’éléments ou pour attirer l’attention sur un autre élément de l’interface. Les badges et les étiquettes sont visuellement similaires, mais les étiquettes sont interactives et les badges ne le sont pas. Si vous cherchez à filtrer, à trier ou à afficher des étiquette, utilisez plutôt une étiquette.
Les badges peuvent être source de confusion pour les utilisateurs de technologies d’assistance.
Assurez-vous que le contexte est très clair, comme dans l’exemple des notifications, où il est
entendu que « 10 » correspond au nombre de notifications. L’utilisation de couleurs ne fournit
qu’un indicateur visuel, car les couleurs ne sont pas communiquées aux utilisateurs de lecteurs
d’écran. Vous devez donc vous assurer que l’information indiquée par la couleur peut être
comprise à partir du contenu, grâce à l’ajout de texte au badge, par exemple, ou par d’autres
moyens, comme l’insertion d’une classe .sr-only.
À faire
- Utilisez des badges pour indiquer un statut.
- Utilisez des badges pour indiquer une valeur numérique.
- Rédigez des badges concis, limités à un ou deux mots
- Assurez-vous de reprendre les mêmes couleurs lorsque vous utilisez les mêmes badges en plusieurs endroits.
À ne pas faire
- Ne créez pas de badge cliquable.
- N’utilisez pas de badges pour indiquer une « nouveauté ».
- N’insérez pas de badges là où l’utilisateur pourrait les confondre avec des boutons.
Badges
Information Succès Avertissement Critique Lumière Sombre
HTML
<!-- Badges -->
<span class="gnb-badge gnb-badge-info">Information</span>
<span class="gnb-badge gnb-badge-success">Succès</span>
<span class="gnb-badge gnb-badge-warning">Avertissement</span>
<span class="gnb-badge gnb-badge-critical">Critique</span>
<span class="gnb-badge gnb-badge-light">Lumière</span>
<span class="gnb-badge gnb-badge-dark">Sombre</span>
<!-- Badge avec information .sr-only -->
<span class="gnb-badge gnb-badge-critical"><span class="sr-only">Erreur :</span>Hors ligne</span>
Exemple
Exemples d’utilisation de badges pour indiquer un statut :
| Serveur | Statut |
|---|---|
| Bishop | Actif |
| Jenkins | Hors ligne |
| Jinx | En attente |
| Kronos | Actif |
Badges à titre de notifications
Les badges peuvent également être utilisés à titre de notifications pour afficher une valeur :
HTML
<a href="#">Notifications<span class="gnb-badge gnb-badge-critical">10</span></a>