Retours et chargement

Dialogue

stableClasses hb-dialog hb-dialog-h hb-dialog-body hb-dialog-actionsVuetify 2 v-dialog max-width="480" + v-card (habillée par vuetify.scss)Vuetify 3 v-dialog + v-card

Quand l'utiliser

Pour une confirmation avant une action irréversible, ou une saisie courte qui ne justifie pas une page (renommer, choisir une date de clôture). Une fiche complète va dans un panneau latéral ou une page.

Code

<div class="hb-dialog" style="max-width:480px" role="dialog" aria-labelledby="dlg-t">
  <div class="hb-dialog-h" id="dlg-t">Supprimer cette check-list ?</div>
  <div class="hb-dialog-body">« Check-list du 05/11/2026 » et ses 3 tâches seront supprimées. Cette action ne peut pas être annulée.</div>
  <div class="hb-dialog-actions"><button class="hb-btn hb-btn-quiet">Annuler</button><button class="hb-btn hb-btn-danger"><i class="material-icons">delete</i>Supprimer</button></div>
</div>

Règles

Le titre est la question ; le corps dit ce qui va se passer et sur quoi ; le bouton de droite reprend le verbe du titre (« Supprimer », pas « OK »).
Annuler à gauche, action à droite, voir Barre d'actions. Échap et clic hors du dialogue valent Annuler, sauf pendant un enregistrement.
Le focus entre dans le dialogue à l'ouverture (sur Annuler pour un destructif, sur le premier champ pour une saisie) et revient à l'élément déclencheur à la fermeture.
v-dialog gère le fond, le focus et le plein écran sur téléphone (fullscreen sous sm) ; hb-dialog habille son contenu et sert à un <dialog> natif hors Vuetify.