Undo toast with timer
Confirms an action with an “Undo” button and a thin line that shrinks to show how long you have left.
Settings
Code
<div class="uv-zu"><button class="fire">Archive</button><div class="toast"><span><b>Item archived</b><small>You can restore it now.</small></span><button class="undo">Undo</button><i></i></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
The friendliest alternative to an “Are you sure?” dialog. In a task manager, archiving a task happens at once, and this undo toast gives people a few seconds to change their mind. Gmail made the pattern familiar, so users get it straight away. The shrinking line shows the time left without a countdown.
Only offer undo if you can really reverse the action, which usually means waiting until the toast is gone before deleting for good. Five seconds suits most cases; for bulk actions, like archiving fifty emails, give people a little longer.