!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
Ver todos: ToastsDó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í.