Badge
Les badges sont des petits labels, sur un fond de couleur, qui aident à qualifier ou mettre en avant des informations. Des balises multiples ou uniques peuvent être utilisées pour classer les éléments.
Description
Les badges sont des petits labels, sur un fond de couleur, qui aident à qualifier ou mettre en avant des informations. Des balises multiples ou uniques peuvent être utilisées pour classer les éléments.
Lorsque vous avez une interface utilisateur complexe, les utilisateurs ont du mal à trouver les informations pertinentes à leur lecture. Utilisez des badges pour mettre en avant de l'information afin de faciliter la lecture.
Plateformes
Anatomie
- Couleur : reflète un statut (ex. : neutre, succès, erreur, warning) ou une catégorie.
- Label : texte court.
- Icon (optionnel) : icone qui illustre le badge ou une action qui peut être réalisée sur le badge. Ex : suppression ou affichage d'une information supplémentaire (tooltip).
Usage
Quand l'utiliser ?
- Pour attirer l'attention sur un contenu important. Les balises peuvent attirer l'attention sur un contenu important qui pourrait autrement être manqué.
- Pour catégoriser un élément, afin de le différencier ou de l'apparenter avec d'autres éléments.
- Dans les composants multi-select et search pour afficher des éléments sélectionnés.
Quel type de badge utiliser ?
Promo-light et promo-dark :
Utilisé pour mettre en avant des promotions uniquement.
Primary, secondary, tertiary:
Utilisés en fonction de l'importance que l'on souhaite donner à l'information qu'ils contiennent.
Positive, negative, warning :
Utilisés pour transmettre un état positif, en attente d'une action ou négatif.
Info :
Utilisé pour transmettre une information très courte.
Do's and don'ts
-
Do
Garder le contenu des badges le plus succinct possible
-
Don't
Il est interdit d'écrire des contenus trop longs. Ne jamais passer sur plusieurs lignes.
-
Do
Rester cohérent sur le type de badge au sein d’un même groupe
-
Don't
Il est interdit d'utiliser des types de badges différents dans un groupe
Exemples
Groupe de badges
Groupe de badges avec bouton
Quand l'utiliser ?
- Pour attirer l'attention sur un contenu important. Les balises peuvent attirer l'attention sur un contenu important qui pourrait autrement être manqué.
- Pour catégoriser un élément, afin de le différencier ou de l'apparenter avec d'autres éléments.
- Dans les composants multi-select et search pour afficher des éléments sélectionnés.
Quel type de badge utiliser ?
Promo-light et promo-dark :
Utilisé pour mettre en avant des promotions uniquement.
Primary, secondary, tertiary:
Utilisés en fonction de l'importance que l'on souhaite donner à l'information qu'ils contiennent.
Positive, negative, warning :
Utilisés pour transmettre un état positif, en attente d'une action ou négatif.
Info :
Utilisé pour transmettre une information très courte.
Anatomie
- Couleur : reflète un statut (ex. : neutre, succès, erreur, warning) ou une catégorie.
- Label : texte court.
- Icon (optionnel) : icone qui illustre le badge ou une action qui peut être réalisée sur le badge. Ex : suppression ou affichage d'une information supplémentaire (tooltip).
Usage
Quand l'utiliser ?
- Pour attirer l'attention sur un contenu important. Les balises peuvent attirer l'attention sur un contenu important qui pourrait autrement être manqué.
- Pour catégoriser un élément, afin de le différencier ou de l'apparenter avec d'autres éléments.
- Dans les composants multi-select et search pour afficher des éléments sélectionnés.
Quel type de badge utiliser ?
Promo-light et promo-dark :
Utilisé pour mettre en avant des promotions uniquement.
Primary, secondary, tertiary:
Utilisés en fonction de l'importance que l'on souhaite donner à l'information qu'ils contiennent.
Positive, negative, warning :
Utilisés pour transmettre un état positif, en attente d'une action ou négatif.
Info :
Utilisé pour transmettre une information très courte.
Do's and don'ts
-
Do
Garder le contenu des badges le plus succinct possible
-
Don't
Il est interdit d'écrire des contenus trop longs. Ne jamais passer sur plusieurs lignes.
-
Do
Rester cohérent sur le type de badge au sein d’un même groupe
-
Don't
Il est interdit d'utiliser des types de badges différents dans un groupe
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.