Données

Badge d'état

stableClasses hb-badge hb-badge-success hb-badge-warning hb-badge-danger hb-badge-info hb-badge-slate hb-badge-plainVuetify 2 v-chip small label avec la couleur douce (habillé)Vuetify 3 v-chip size="small" label

Quand l'utiliser

Pour dire l'état d'une ligne, d'une fiche, d'une synchronisation : « Conforme », « À vérifier », « Archivée », « Synchro à jour ». Un badge n'est pas cliquable ; pour un filtre, une puce à bascule.

Conforme À vérifier Écart de poids Nouveau Archivée Neutre Sans point

Code

<div class="hb-row">
  <span class="hb-badge hb-badge-success">Conforme</span>
  <span class="hb-badge hb-badge-warning">À vérifier</span>
  <span class="hb-badge hb-badge-danger">Écart de poids</span>
  <span class="hb-badge hb-badge-info">Nouveau</span>
  <span class="hb-badge hb-badge-slate">Archivée</span>
  <span class="hb-badge">Neutre</span>
  <span class="hb-badge hb-badge-plain hb-badge-info">Sans point</span>
</div>

Correspondance des états métier

Hublot.badgeTone(statut) renvoie la variante à partir du mot : actif, payé, en ligne, conforme, terminé, signé → success ; à vérifier, expire, bas, proche, en attente, brouillon → warning ; impayé, hors ligne, erreur, non conforme, expiré, résilié → danger ; info, nouveau → info ; sinon neutre. Le texte du badge reste le mot métier.

Règles

Un mot ou deux, casse de phrase, pas de point. Le point coloré est décoratif : c'est le texte qui porte l'état.
Pas de badge rouge pour un simple « non » : le rouge est une erreur ou un danger.
Dans un tableau, le badge va dans sa colonne « État », jamais dans la cellule du titre.