Badge
Le badge est un élément d’indication permettant de valoriser une information liée à un élément précis du site.
- Une icône, uniquement pour les badges système — En option
- Un libellé, en majuscule — Obligatoire
- Un fond — Obligatoire
Variations
Badge standard
Badge système avec icône
- Succès
- Avertissement
- Erreur
- Information
- Nouveauté
Utiliser cette variation pour préciser l’information donnée par le texte du badge avec l’icône correspondante.
L’ajout d’une icône est autorisée, et automatique en code, uniquement pour les badges système.
Badge système sans icône
Il est possible d’utiliser un badge système sans icône.
Tailles
Le badge est disponible en 2 tailles :
- SM pour small
- MD pour medium - taille par défaut
États
Le badge n’est sujet à aucun changement d’état.
Personnalisation
Les badges systèmes ne sont pas personnalisables.
À faire
Utiliser l’icône et la couleur système correspondantes à l’information fournie.
À ne pas faire
Ne pas changer l’icône et la couleur d’un badge système.
La couleur des badges standard peut être personnalisée, parmi les couleurs illustratives autorisées uniquement.
| Éléments | Indice thème claire | Indice thème sombre |
|---|---|---|
| Fond |
Indice 950 exemple : $pink-tuile-950
|
Indice 100 exemple : $pink-tuile-100
|
| Texte |
Indice sun exemple : $pink-tuile-sun-425
|
Indice moon exemple : $pink-tuile-moon-750
|
À faire
Utiliser une couleur illustrative sur un badge standard
(exemple :
$Pink-tuile).
À ne pas faire
Ne pas utiliser une icône dans un badge standard.
À ne pas faire
Ne pas utiliser une couleur système pour un badge standard.