Insel-Pillen-Toast
Eine kleine schwarze Kapsel zieht sich auf, zeigt die Meldung und schrumpft wieder, wie die Dynamic Island des iPhone.
Einstellungen
Code
<div class="uv-zi"><button class="fire">Bestätigen</button><div class="toast"><i>✓</i><span><b>Buchung bestätigt</b><small>Alles ist bereit</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
Passt zu Mobile-first-Produkten, die sich nativ anfühlen sollen. In einer App für Restaurantreservierungen wächst die Kapsel direkt nach der Tischbuchung aus einem Punkt heraus, zeigt „Reservierung bestätigt“ und schließt sich nach ein paar Sekunden wieder. Wer eine Benachrichtigung im Dynamic-Island-Stil in CSS sucht, ist hier richtig.
Beschränk den Text auf einen Titel und eine kurze Zeile, weiter geht die Kapsel nicht auf. Am besten sitzt sie oben auf dem Handy; unten auf einer Desktop-Seite geht die Anspielung aufs iPhone verloren.