Badge
Utilisation
Présentation
Les badges constituent un moyen discret de fournir des informations sur du contenu nouveau ou mis à jour. Ils indiquent des valeurs numériques et des comptes, comme le nombre de mises à jour disponibles ou le nombre de messages non lus. La valeur numérique figurant à l'intérieur du badge change de façon dynamique en temps réel à l'arrivée de nouvelles notifications.
Quand l'utiliser
- Pour afficher des informations sur le contenu nouveau ou mis à jour sous forme de valeur numérique.
- Dans des systèmes à workflows complexes exigeant une collaboration. Cette pratique peut aider les utilisateurs à suivre les activités importantes.
- Pour informer les utilisateurs des mises à jour logicielles importantes, telles que les corrections de bogues ou l'ajout de fonctionnalités.
Quand ne pas l'utiliser
- Pour les informations de statut non numériques. Utilisez le composant Étiquette d'information à la place.
- Pour catégoriser les éléments et filtrer les données. Utilisez plutôt des balises.
Formatage
Structure
Le composant Badge se compose des éléments suivants :
- Conteneur avec un remplissage de couleur spécifique en fonction du cas d'utilisation.
- Étiquette qui affiche un numéro. Pour en savoir plus sur le traitement des valeurs numériques volumineuses, reportez-vous à la section Meilleures pratiques.
Types
Les badges existent en plusieurs couleurs qui ont un sens particulier :
- Principal : utilisez le badge principal lors du suivi des éléments liés à un workflow.
- Notification : utilisez le badge de notification pour superposer des icônes et communiquer du contenu nouveau et mis à jour, comme le nombre de messages non lus.
- Neutre : utilisez le badge neutre pour les informations qui ne sont pas essentielles.
- Inversé : utilisez le badge inversé pour conserver le contraste des couleurs sur un fond sombre.
Meilleures pratiques
- Utilisez un placement cohérent des superpositions de badge dans l'ensemble d'un produit ou d'une expérience.
- Utilisez des badges comme composant autonome (à gauche) ou comme superposition (à droite).
- Jutro dispose d'une propriété
maxValuequi vous permet de définir la valeur maximale du badge. Si la propriétévalueest supérieure àmaxValue, le badge affichera « maxValue+ ». S'il existe un cas d'utilisation où il y a des milliers de threads, d'instances ou d'erreurs, il est recommandé de définir une valeur pour la propriétémaxValue.
| Badge comme composant autonome | Badge comme superposition |
|---|---|
 |  |
Interactions
Souris
- Un clic sur le badge superposé sur une icône génère la liste contenant des informations supplémentaires sur des notifications spécifiques.
- Un lien peut apparaître dans une liste associée à un badge. Les utilisateurs peuvent déclencher des actions en cliquant sur ces liens. Par exemple, « Voir toutes les notifications » ou « Accéder aux nouveaux messages ».
- Les badges disparaissent une fois que l'utilisateur a cliqué dessus.
Lecteur d'écran
Le composant Badge comporte les attributs aria-live="polite" et aria-atomic="true". Les utilisateurs du lecteur d'écran sont avertis des mises à jour de contenu. Dans Storybook, le bouton liveRegionContext permet aux développeurs d'ajouter du contexte à la signification du badge.
Accessibilité
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
- Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
- Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
- Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
- Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Si vous appliquez un code couleur personnalisé à l'arrière-plan du badge, assurez-vous que les niveaux de contraste sont conformes au seuil accepté de 4.5:1.