Notifiche toast non invasive
Messaggi temporanei per conferme, errori o avvisi senza interrompere la navigazione.
Quando si usa
Quando vuoi confermare un salvataggio, una copia negli appunti o un errore senza aprire finestre modali.
Perché si usa
Il toast informa l'utente senza interrompere il flusso di lavoro e scompare automaticamente dopo pochi secondi.
Vantaggi principali
- Feedback discreto
- Riutilizzabile per conferme ed errori
- Non blocca la pagina
Anteprima del risultato
Il messaggio compare come avviso temporaneo in un angolo.
Codice copiato correttamente.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<button onclick="mostraToast('Codice copiato correttamente')">Mostra avviso</button>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script>
function mostraToast(testo){
const toast = document.getElementById('toast');
toast.textContent = testo;
toast.classList.add('visibile');
clearTimeout(window.timerToast);
window.timerToast = setTimeout(function(){
toast.classList.remove('visibile');
}, 3000);
}
</script>Da personalizzare: Durata, posizione, colori e testi dei messaggi.
Errore da evitare: Non usare toast per errori critici o decisioni importanti: in quei casi serve un messaggio persistente.