Toast mit Rückgängig-Button
Bestätigt eine Aktion mit „Rückgängig“-Button und einer dünnen Linie, die schrumpft und die verbleibende Zeit zeigt.
Einstellungen
Code
<div class="uv-zu"><button class="fire">Archivieren</button><div class="toast"><span><b>Element archiviert</b><small>Du kannst es jetzt wiederherstellen.</small></span><button class="undo">Widerrufen</button><i></i></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
Die freundlichste Alternative zum Dialog „Bist du sicher?“. In einem Aufgabenmanager wird eine Aufgabe sofort archiviert, und dieser Undo-Toast lässt einem ein paar Sekunden, um es sich anders zu überlegen. Gmail hat das Muster bekannt gemacht, also versteht es jeder sofort. Die schrumpfende Linie zeigt die Restzeit ohne Countdown.
Biete Rückgängig nur an, wenn sich die Aktion wirklich umkehren lässt. Meist heißt das: erst endgültig löschen, wenn der Toast verschwunden ist. Fünf Sekunden reichen fast immer, bei Massenaktionen wie fünfzig archivierten Mails darf es etwas länger sein.