Fondations

Icônes

Jeu et taille

Material Icons (ligatures <i class="material-icons">print</i>, ou <v-icon> dans Vuetify). Taille --icon : 20 px en normal et compact, 24 px en touch ; 18 px dans un bouton petit ou une cellule, 28 px sur une touche de pavé, 32 px dans une zone de dépôt, 48 px dans une erreur de page.

<div class="hb-row">
  <button class="hb-btn"><i class="material-icons">print</i>Imprimer</button>
  <button class="hb-btn hb-btn-primary"><i class="material-icons">add</i>Ajouter</button>
  <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>
  <span class="hb-list-icon"><i class="material-icons">chat_bubble_outline</i></span>
</div>

Règles

• Une icône neutre est en --ink-muted ; elle prend la couleur métier quand elle porte une action ou au survol. Le rouge n'apparaît qu'au survol d'une suppression.
• Tout bouton à icône seule porte un aria-label et une infobulle ; un bouton à libellé n'a pas d'infobulle.
• Les icônes des composants (hb-btn, hb-list-add, hb-tab-add, hb-listing-item, hb-key…) héritent leur couleur du composant : ne pas poser de color sur l'icône.
• Vocabulaire fixe pour les actions récurrentes : add ajouter, edit modifier, delete supprimer, content_copy dupliquer, print imprimer, inventory_2 archiver, unarchive réactiver, drag_indicator déplacer, search rechercher, close fermer ou effacer, check valider, chevron_left / chevron_right paginer, sync synchroniser, notifications notifications.