Les badges .badge sont des composants simples et basiques de type inline qui servent à fournir des détails supplémentaires importants liés aux liens
ou au texte tels que les avertissements, les décomptes, les mises à jour, les alertes et les conseils, etc...
Les badges sont mis à l'échelle pour correspondre à la taille de l'élément parent immédiat en utilisant une taille de police relative à 70%.
Pour donner l'apparence d'une capsule une classe additionnelle .badge--pill est à disposition. Ainsi que pour donner l'apparence d'un cercle .badge--circle.
Dans ce cas le ratio largeur/hauteur est préservé en fonction de la taille du contenu.
Il est également possible de placer un badge relativement à son parent en haut à droite de celui-ci avec la classe .badge--floating
Les badges peuvent être stylisé grâce aux classes utilitaires de design .ui--primary, .ui--secondary, .ui--success etc...
L'utilisation des classes utilitaires .ui--* sur un élément de type lien <a> fournira rapidement des badges actionnables avec des états de survol.
Selon le contenu des badges, comme des mots ou des chiffres supplémentaires aléatoires, ou le fait de stylisé le badge pour ajouter du sens ne fournit qu'une indication visuelle. Et cela sera qu'une source de confusion pour les utilisateurs de technologies d'assistance.
Il faut donc s'assurer que les informations indiquées soient évidentes, soit à partir du contenu lui-même (texte visible)
soit par un élément supplémentaire masqué par la classe .sr-only, qui restera accessible pour les lecteurs d'écran.
Grâce aux variables CSS, vous pouvez customiser facilement vos boites de dialogue. Pour plus d'informations reportez-vous à la section Personnalisation