Versión 4.2 disponible
Novedades
  • Modo oscuro automático
  • Exportar a PDF
  • Búsqueda un 40 % más rápida
HTML + CSSToasts

Toast de nueva versión

Avisa de una actualización con las novedades desplegables y un botón que enseña el progreso.

Ajustes

16px
1x

Código

<div class="uv-qup"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M7.5 10.5L12 15l4.5-4.5"/><path d="M4 17v1.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V17"/></svg></span><div class="tx"><b>Versión 4.2 disponible</b><details><summary>Novedades</summary><ul><li>Modo oscuro automático</li><li>Exportar a PDF</li><li>Búsqueda un 40 % más rápida</li></ul></details></div><button type="button" class="go"><span class="a">Actualizar</span><span class="b"><i></i></span><span class="c"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></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: Toasts

Dónde usarlo

Las apps de escritorio, las PWA y los paneles necesitan una forma educada de pedir que se recargue. Este toast dice la versión nueva, guarda las novedades tras un pequeño desplegable que se abre en el sitio y convierte el botón de actualizar en un spinner y luego en un check verde, así que se ve la acción terminada sin salir de la página.

Las novedades usan un elemento details nativo, accesible con teclado y sin script. Conecta el botón a tu service worker o a tu lógica de recarga y deja la lista en tres puntos cortos.