!Couldn’t connectComprueba tu conexión.
HTML + CSSToasts

Shake error toast

An error message that slides in with a short shake and offers a “Retry” button right where you need it.

Settings

16px
1x

Code

<div class="uv-ze"><button class="fire">Trigger error</button><div class="toast"><i>!</i><span><b>Couldn’t connect</b><small>Check your connection.</small></span><button class="retry">Retry</button></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Toasts

Where to use it

When something fails, a small shake says “this needs you” without a scary red page. Picture a food delivery app where the order cannot reach the restaurant, or a checkout that loses connection at the last step: the error toast explains what happened and puts “Retry” one tap away, so nobody has to fill everything in again.

Say what went wrong and what to do next in plain words; “Error 500” helps nobody. Keep the shake for real errors, not warnings. And if the problem is on your side, say so: people forgive a failed payment much faster that way.