Boutons et actions

Bouton à icône

stableClasses hb-btn-icon hb-btn-icon-danger hb-count hb-dotVuetify 2 v-btn icon + v-tooltipVuetify 3 v-btn icon="mdi-…" + v-tooltip

Quand l'utiliser

Pour une action secondaire répétée (dupliquer, supprimer, déplacer une ligne), dans une barre d'outils, ou dans la barre du haut (notifications, synchronisation). Jamais pour l'action principale d'un écran.

Code

<div class="hb-row">
  <button class="hb-btn hb-btn-icon" aria-label="Dupliquer"><i class="material-icons">content_copy</i></button>
  <button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button>
  <button class="hb-btn hb-btn-icon" aria-label="Déplacer"><i class="material-icons">drag_indicator</i></button>
  <button class="hb-btn hb-btn-icon" aria-label="3 notifications"><i class="material-icons">notifications</i><span class="hb-count">3</span></button>
  <button class="hb-btn hb-btn-icon" aria-label="Synchronisation en attente"><i class="material-icons">sync</i><span class="hb-dot hb-dot-warning"></span></button>
  <button class="hb-btn hb-btn-icon" aria-label="Désactivé" disabled><i class="material-icons">print</i></button>
</div>

Pastilles

hb-count (nombre, fond rouge) ou hb-dot (point d'état, voir Point et pastille) posés dans le bouton se calent en haut à droite. Le nombre entre dans le aria-label du bouton.

Accessibilité

Le aria-label dit l'action, pas l'icône (« Supprimer la tâche », pas « Poubelle »). Dans Vuetify, l'infobulle est un v-tooltip ; hors Vuetify, hb-tip avec data-tip. Le bouton fait --control de côté (38, 34 ou 48 px selon la densité) ; dans une ligne de liste, 28 px avec une icône de 18 px.