Elastischer Erfolgs-Toast
Eine Erfolgsmeldung, die mit grünem Haken von unten hochfedert, kurz stehen bleibt und wieder abtaucht.
Einstellungen
Code
<div class="uv-zs"><button class="fire">Toast anzeigen</button><div class="toast"><i>✓</i><span><b>Änderungen gespeichert</b><small>Alles ist synchronisiert.</small></span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Wofür du ihn nutzen kannst
Direkt nach etwas Wichtigem wollen Menschen vor allem eine Bestätigung. In einer Banking-App erscheint nach dem Absenden einer Überweisung „Überweisung gesendet“ mit grünem Haken und einer Zeile Details, dann verschwindet die Meldung von allein. Ein Erfolgs-Toast in HTML und CSS mit federndem Auftritt, der beruhigt statt laut zu sein.
Nutze ihn für Aktionen, die schon durch sind, nicht für laufende Vorgänge. Schreib das Ergebnis statt der Aktion: „250 € an Ana gesendet“ sagt mehr als „Erfolg“. Stehen Betrag oder Referenz in der Meldung, lass sie etwas länger stehen.