Le composant badge est utilisé pour indiquer des notifications, des alertes ou des messages dans les interfaces utilisateur.
Les badges peuvent être configurés avec des couleurs et des formes différentes pour correspondre à différents états ou niveaux de priorité.
✅ Usage correct :
- Indiquer l'état ou la condition d'un élément, comme les notifications.
- Indiquer le niveau d'urgence ou d'importance d'un élément.
🚫 Usage incorrect :
- Ne pas utiliser de badges pour afficher des informations complexes, telles que des paragraphes de texte ou des descriptions
- N'utilisez pas de badges pour des éléments qui n'ont pas besoin d'être mis en évidence ou pour lesquels il n'y a pas d'importance particulière à communiquer.
- Évitez de combiner plusieurs badges sur un même élément, ce qui pourrait rendre la compréhension difficile et l'interface encombrée.
Localisation :
Les badges sont généralement placés dans le coin supérieur droit d'un composant (bouton, avatar, onglet) ou à côté (sur un élément de liste).
Ils doivent être placés de manière à assurer une visibilité claire, sans obstruer les informations ou fonctionnalités essentielles du composant sous-jacent. Par exemple, vous pouvez positionner le badge dans un coin d'un bouton ou un bouton icône, en veillant attentivement à ne pas le superposer au texte ou à l'illustration afin de préserver leur lisibilité et leur clarté.
Comportement général
Les badges affichent des informations succinctes, comme des quantités ou des états, à côté d'éléments.
Réactivité
Les badges doivent être réactifs et s'adapter aux changements de contenu ou d'état de l'élément auquel ils sont attachés. Par exemple, si le nombre de notifications non lues change, le badge doit être mis à jour automatiquement pour refléter ce changement.
Interaction limitée
En général, les badges n'ont pas de comportement interactif direct. Ils servent principalement à fournir une information visuelle rapide sans nécessiter d'interaction de la part de l'utilisateur.
Indication contextuelle
Les badges peuvent être utilisés pour indiquer différents types d'informations, tels que le nombre de nouveaux messages, le statut d'une tâche, la présence d'éléments non lus, etc.