Composants
Les composants sont les éléments réutilisables du Design System, conçus pour composer des interfaces cohérentes et accessibles.
Badges
Statuts, types, niveaux et états système.
Aperçu
Le badge de base qualifie une information courte : statut, type, niveau ou indicateur système.
.is-success
Succès
.is-info
Info
.is-warning
Attention
.is-error
Erreur
Ces modèles canoniques restent volontairement simples : un libellé court, non interactif, affiché en ligne dans le contenu.
<span class="app-badge is-primary">Usage
Utiliser .app-badge pour afficher une information courte, non interactive, qui doit être scannée rapidement dans une carte, une liste, un tableau ou un header.
Cas d’usage fréquents
- Identifier un statut : en cours, terminé, erreur, attention.
- Qualifier un type de contenu : statut, profil, rapport, alerte.
- Mettre en évidence un niveau, une catégorie ou un indicateur synthétique.
- Garder un libellé court : un à trois mots maximum dans la majorité des cas.
Choisir le bon composant
Le badge sert à qualifier une information. Il ne doit pas remplacer un composant qui porte une action, un message important ou une sélection utilisateur.
| Besoin UX | Composant recommandé | Règle |
|---|---|---|
| Qualifier un état court | .app-badge |
Utiliser un libellé stable et lisible en un coup d’œil. |
| Attirer l’attention sur un message | .app-alert |
Préférer une alerte si le contenu demande une lecture ou une décision. |
| Déclencher une action | .app-button |
Un badge ne doit pas ressembler à un bouton ni devenir ambigu. |
| Filtrer ou sélectionner | Tag ou chip dédié | Prévoir un composant interactif spécifique si l’utilisateur peut choisir ou retirer l’élément. |
Règles de libellé
- Préférer des libellés courts : “Terminé”, “Planifié”, “Confirmé”, “À vérifier”.
- Éviter les phrases complètes : le badge doit rester un repère de lecture, pas un message.
- Utiliser une terminologie stable dans toute l’application pour éviter les synonymes concurrents.
- Ne pas faire porter une information critique uniquement par un badge isolé.
Anatomie
| Élément | Rôle |
|---|---|
.app-badge |
Base visuelle du composant : forme pill, typographie compacte, alignement inline. |
.is-* |
Variante d’intention ou de couleur appliquée au badge. |
.has-icon |
Composition avec une icône lorsque le pictogramme renforce le sens du libellé. |
Variantes
Les variantes changent l’intention visuelle du badge. Elles doivent rester limitées aux couleurs, états et compositions prévus par le Design System.
Accessibilité
Le badge est un indicateur visuel court. Il ne doit pas être le seul moyen de comprendre une information critique.
Audit WCAG
| Point contrôlé | Critère | Niveau | Résultat attendu |
|---|---|---|---|
| Contraste texte / fond | 1.4.3 Contraste minimum |
AA | À vérifier pour chaque variante : le texte compact du badge doit rester lisible sur son fond. |
| Icône porteuse de sens | 1.4.11 Contraste non textuel |
AA | Conforme si l’icône utilise currentColor et si le texte du badge reste suffisamment contrasté. |
| Information par la couleur | 1.4.1 Utilisation de la couleur |
A | Conforme si le libellé explicite le sens : ne pas dépendre uniquement de la couleur. |
| Icône décorative | 1.1.1 Contenu non textuel |
A | Conforme si l’icône décorative est masquée avec aria-hidden="true". |
Recommandations d’usage
- Préférer un libellé explicite : “Terminé” est plus clair qu’un badge uniquement vert.
- Masquer les icônes décoratives avec
aria-hidden="true". - Ne pas transformer un badge en bouton ou en lien. Utiliser un composant interactif dédié si une action est attendue.
- Ne pas utiliser uniquement la couleur pour distinguer deux états proches.
- Vérifier le contraste réel des variantes avant de déclarer une conformité WCAG.
- Prévoir un texte adjacent ou un contexte clair si le badge signale une information critique.
À éviter
- Ne pas utiliser un badge pour remplacer un titre, un bouton ou un message d’alerte.
- Ne pas écrire de longues phrases dans un badge.
- Ne pas créer une couleur locale si une variante DS existe déjà.
- Ne pas multiplier les badges dans une même carte sans hiérarchie claire.
- Ne pas ajouter une icône si elle répète inutilement le texte.
- Ne pas rendre un badge cliquable sans affordance claire : l’utilisateur doit comprendre immédiatement si un élément est interactif.
- Ne pas utiliser deux couleurs différentes pour exprimer le même statut dans deux écrans différents.