Données

Point d'état et pastille

nouveauClasses hb-dot hb-dot-success hb-dot-warning hb-dot-danger hb-dot-brand hb-countVuetify 2 v-badge dot, v-badge content="3"Vuetify 3 v-badge dot, v-badge content="3"

Quand l'utiliser

Le point quand l'état est secondaire et que le mot serait trop lourd : imprimante connectée dans une liste de réglages, onglet avec du nouveau. La pastille de compte sur un bouton à icône de la barre du haut. Dès que l'état compte, un badge avec son mot.

Imprimante connectée Synchro en attente Hors ligne Factures 12

Code

<div class="hb-row" style="gap:var(--space-5)">
  <span><span class="hb-dot hb-dot-success" aria-hidden="true"></span> Imprimante connectée</span>
  <span><span class="hb-dot hb-dot-warning" aria-hidden="true"></span> Synchro en attente</span>
  <span><span class="hb-dot hb-dot-danger" aria-hidden="true"></span> Hors ligne</span>
  <span class="hb-tab" aria-selected="false" style="padding:6px 12px">Factures <span class="hb-dot hb-dot-brand" aria-label="nouveau"></span></span>
  <span class="hb-count">12</span>
  <button class="hb-btn hb-btn-icon" aria-label="3 notifications"><i class="material-icons">notifications</i><span class="hb-count">3</span></button>
</div>

Accessibilité

Un point seul ne dit rien à un lecteur d'écran : il accompagne un texte (aria-hidden="true") ou porte un aria-label. Le nombre d'une pastille entre dans le aria-label du bouton qui la porte.