!Verbindung fehlgeschlagenComprueba tu conexión.
HTML + CSSToasts

Fehler-Toast mit Wackeln

Eine Fehlermeldung, die mit kurzem Wackeln hereinkommt und direkt einen „Erneut versuchen“-Button anbietet.

Einstellungen

16px
1x

Code

<div class="uv-ze"><button class="fire">Fehler auslösen</button><div class="toast"><i>!</i><span><b>Verbindung fehlgeschlagen</b><small>Prüfe deine Verbindung.</small></span><button class="retry">Erneut versuchen</button></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

Wenn etwas schiefgeht, sagt ein kurzes Wackeln „Hier musst du kurz ran“, ganz ohne rote Schreckensseite. Denk an eine Lieferdienst-App, deren Bestellung das Restaurant nicht erreicht, oder an einen Checkout, der im letzten Schritt die Verbindung verliert: Der Fehler-Toast erklärt das Problem und bietet „Erneut versuchen“ direkt an.

Sag in normalen Worten, was schiefging und was als Nächstes zu tun ist; „Fehler 500“ hilft niemandem. Das Wackeln ist für echte Fehler da, nicht für Hinweise. Und liegt das Problem bei dir, gib es zu, das verzeihen Leute schneller.