Retours et chargement

Toast

stableClasses hb-toast hb-toast-danger hb-toast-enter icoVuetify 2 v-snackbar bottom (habillé)Vuetify 3 v-snackbar location="bottom"

Quand l'utiliser

Pour dire qu'une action a réussi sans arrêter l'utilisateur : « Cuisson enregistrée », « Tâche dupliquée », avec un « Annuler » quand l'action est réversible. Une erreur reste dans une alerte ; le toast rouge sert à un échec sans conséquence (« Impression impossible, réessayez »).

Tâche dupliquée

Impression impossible, l'imprimante ne répond pas.

Code

<div style="position:relative;height:120px;background:var(--surface);border-radius:var(--radius-lg)">
  <div class="hb-toast" style="position:absolute"><span class="ico"></span>Tâche dupliquée<button class="hb-btn">Annuler</button></div>
</div>
<div style="position:relative;height:88px;background:var(--surface);border-radius:var(--radius-lg)">
  <div class="hb-toast hb-toast-danger" style="position:absolute"><span class="ico"></span>Impression impossible, l'imprimante ne répond pas.</div>
</div>

Règles

Une ligne, 560 px au plus, 4 secondes (8 avec une action) ; un nouveau toast remplace le précédent.
hb-toast-enter joue l'apparition ; role="status" pour que le lecteur d'écran l'annonce sans interrompre.
Pas de toast pour une saisie en place (texte éditable) : l'enregistrement silencieux est la norme, le toast dirait l'évidence.