Boutons et actions

Barre d'actions

stableClasses hb-card-foot hb-actions hb-dialog-actions hb-footbarVuetify 2 v-card-actions (habillé par vuetify.scss, même règle)Vuetify 3 v-card-actions

Règle

Dans un pied de carte, un dialogue ou un formulaire, le premier bouton du DOM est repoussé à gauche (Annuler, Fermer, Retour), les suivants vont à droite, le dernier est l'action principale. Un seul bouton va à droite. Aucun <v-spacer> ni margin-left: auto à écrire.

Contenu de la carte ou du dialogue.

Un seul bouton : il va à droite.

Code

<div class="hb-card" style="max-width:520px">
  <div class="hb-card-body">Contenu de la carte ou du dialogue.</div>
  <div class="hb-card-foot"><button class="hb-btn hb-btn-quiet">Annuler</button><button class="hb-btn">Brouillon</button><button class="hb-btn hb-btn-primary">Enregistrer</button></div>
</div>
<div class="hb-card" style="max-width:520px">
  <div class="hb-card-body">Un seul bouton : il va à droite.</div>
  <div class="hb-card-foot"><button class="hb-btn hb-btn-primary">Fermer</button></div>
</div>

Où

hb-card-foot : pied de carte, fond --surface-hover, filet au-dessus.
hb-dialog-actions : pied de dialogue.
hb-actions : sous un formulaire hors carte.
hb-footbar : barre collée en bas d'un écran de tablette, avec un total à gauche, voir Barre de validation.

Destructif

Une suppression n'est jamais l'action principale d'une barre : elle est dans la barre d'outils de l'en-tête ou dans le menu ⋮, et ouvre un dialogue de confirmation dont le bouton rouge est à droite.