!No se pudo conectarComprueba tu conexión.
HTML + CSSToasts
Toast de error con sacudida
Un mensaje de error que entra con una sacudida corta y ofrece «Reintentar» justo donde hace falta.
Ajustes
16px
1x
Código
<div class="uv-ze"><button class="fire">Provocar error</button><div class="toast"><i>!</i><span><b>No se pudo conectar</b><small>Comprueba tu conexión.</small></span><button class="retry">Reintentar</button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Dónde usarlo
Cuando algo falla, una pequeña sacudida dice «esto te necesita» sin pantallazos rojos. Piensa en una app de reparto de comida donde el pedido no llega al restaurante, o en un pago que pierde la conexión en el último paso: el toast de error explica qué ha pasado y deja «Reintentar» a un toque, sin volver a rellenar nada.
Di qué ha fallado y qué hacer después con palabras normales; un «Error 500» no ayuda a nadie. Guarda la sacudida para errores de verdad, no para avisos. Y si el problema es tuyo, reconócelo: la gente perdona antes así.