Badge

Le composant Badge est un petit indicateur visuel utilisé pour attirer l'attention sur des éléments spécifiques de l'interface utilisateur. Les badges sont idéaux pour afficher des états, des notifications ou des quantités

• Indicateurs de statut : Pour montrer l'état actuel d'un élément (ex : en cours, complet, nouveau).
• Notifications : Pour indiquer de nouvelles activités ou des mises à jour.
• Quantités : Pour afficher le nombre d'éléments associés à une catégorie ou une action (ex : articles dans le panier, messages non lus).

Quand utiliser

• Pour indiquer un état ou un statut

  • Vert : Succès, disponible
  • Rouge : Erreur
  • Jaune : Attention
  • Bleu : Information

• Pour indiquer le nombre d’item contenu

  • Vente : les badge peuvent être utilisés pour le stock ou la disponibilité (ex : “En stock”, “Rupture de stock”), afficher le nombre d’article dans le panier de l’utilisateur
  • Assistance : les badge peuvent être utilisés pour indiquer le statut d’un ticket de support
  • Application/Espace client : les badge peuvent être utilisés pour indiquer le nombre de message non lus, ou signaler qu’il

Quand ne pas utiliser

• Informations primaires : Ne pas utiliser les badges pour des informations essentielles qui doivent être claires
• Actions cliquables : Les badges ne doivent pas être utilisés comme éléments interactifs
• Surutilisation : Éviter de mettre des badges partout, car cela pourrait réduire leur impact et encombrer l'interface