Boutons et actions

Bouton

stableClasses hb-btn hb-btn-primary hb-btn-secondary hb-btn-danger hb-btn-quiet hb-btn-sm hb-btn-touch hb-btn-touch-lgVuetify 2 v-btn color="primary" depressed (principal), v-btn outlined (neutre), v-btn text (discret)Vuetify 3 v-btn color="primary" variant="flat", variant="outlined", variant="text"

Quand l'utiliser

Pour une action qui fait quelque chose : enregistrer, imprimer, ajouter. Pour aller quelque part, un lien. Pour une action secondaire répétée sur chaque ligne, un bouton à icône.

Variantes

Classe	Rôle	Règle
`hb-btn-primary`	l'action principale de l'écran	une seule par écran, en couleur métier
`hb-btn` (neutre)	les autres actions	filet visible, icône en couleur métier
`hb-btn-secondary`	action de second plan qui doit se voir (brouillon)	ardoise, rare
`hb-btn-danger`	suppression, résiliation	contour rouge au repos, fond rouge doux au survol ; précédé d'une confirmation
`hb-btn-quiet`	Annuler, Fermer, lien d'action dans un texte	sans filet ni ombre
`hb-btn-sm`	dans une alerte, un pied de tableau, une cellule	30 px
`hb-btn-touch`, `hb-btn-touch-lg`	tablette hors densité touch	48 px, pleine largeur pour `-lg`

Code

<div class="hb-row">
  <button class="hb-btn hb-btn-primary"><i class="material-icons">add</i>Ajouter une tâche</button>
  <button class="hb-btn"><i class="material-icons">print</i>Imprimer</button>
  <button class="hb-btn hb-btn-secondary">Brouillon</button>
  <button class="hb-btn hb-btn-danger"><i class="material-icons">delete</i>Supprimer</button>
  <button class="hb-btn hb-btn-quiet">Annuler</button>
  <button class="hb-btn hb-btn-sm">Exporter</button>
  <button class="hb-btn" disabled><i class="material-icons">print</i>Désactivé</button>
</div>

États

Repos, survol (fond --surface-hover, filet plus foncé ; souris seulement), appui (scale(.97)), focus clavier (anneau), désactivé (disabled, opacité 50 %, pas d'ombre). Un bouton en cours d'action garde son libellé et montre un anneau : voir Progression.

Libellé

Verbe à l'infinitif d'abord, casse de phrase, sans point : « Valider la réception », « Imprimer ». Pas de « OK » ni de « Oui » : le bouton dit ce qu'il fait. Une icône à gauche seulement si elle aide à reconnaître l'action.

Accessibilité

<button type="button"> dans un formulaire pour ne pas le soumettre ; disabled plutôt qu'un style grisé ; largeur minimale naturelle, jamais plus petit que 44 px de haut en tactile (48 px en touch).