Versión 4.2 disponible
Novedades
- Modo oscuro automático
- Exportar a PDF
- Búsqueda un 40 % más rápida
HTML + CSSToasts
New version available toast
Announces an update with a collapsible list of what's new and a button that shows progress.
Settings
16px
1x
Code
<div class="uv-qup"><button type="button" class="fire">Show again</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>Version 4.2 available</b><details><summary>What’s new</summary><ul><li>Automatic dark mode</li><li>Export to PDF</li><li>40% faster search</li></ul></details></div><button type="button" class="go"><span class="a">Update</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 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
See all ToastsWhere to use it
Desktop apps, progressive web apps and dashboards need a polite way to ask for a reload. This toast states the new version, hides the changelog behind a small disclosure that expands in place, and turns the update button into a spinner and then a green check, so people see the action complete without leaving the page.
The changelog uses a native details element, which is keyboard friendly and needs no script. Connect the button to your service worker or reload logic, and keep the list to three short items.