Données

Puce

stableClasses hb-chip hb-chip-action hb-chip-more hb-chip-toggleVuetify 2 v-chip small (habillé), v-chip-group pour les filtresVuetify 3 v-chip size="small", v-chip-group filter

Trois usages

Classe	Usage
`hb-chip`	une personne ou une entité nommée dans une ligne : avatar + nom ; ne se clique pas
`hb-chip hb-chip-action`	la même, cliquable (ouvrir la fiche) : couleur métier au survol
`hb-chip-more`	« +2 » quand il y a plus de deux personnes, le reste en infobulle
`hb-chip hb-chip-toggle`	un filtre à bascule : `aria-pressed`, teinte métier quand il est actif

ANA. Nguyen DMD. Martin +2

Code

<div class="hb-row">
  <span class="hb-chip"><span class="hb-avatar">AN</span><span>A. Nguyen</span></span>
  <a class="hb-chip hb-chip-action" href="#"><span class="hb-avatar" style="background:var(--chart-2)">DM</span><span>D. Martin</span></a>
  <span class="hb-chip hb-chip-more">+2</span>
  <button class="hb-chip hb-chip-toggle" aria-pressed="true"><i class="material-icons">inventory_2</i>Archivées</button>
  <button class="hb-chip hb-chip-toggle" aria-pressed="false"><i class="material-icons">warning</i>À vérifier</button>
</div>

Règles

Le nom est tronqué par des points de suspension au-delà de la largeur disponible ; le nom complet est en infobulle.
Une puce ne se supprime pas d'une croix dans le bundle : la sélection de personnes passe par le menu de la liste de tâches ou par v-autocomplete chips.
La puce à bascule est un <button aria-pressed> ; elle fait 30 px de haut, sa taille tactile vient de la ligne de filtres.