Toast con deshacer
Confirma una acción con un botón «Deshacer» y una línea que se acorta para marcar el tiempo que queda.
Ajustes
Código
<div class="uv-zu"><button class="fire">Archivar</button><div class="toast"><span><b>Elemento archivado</b><small>Puedes recuperarlo ahora.</small></span><button class="undo">Deshacer</button><i></i></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
La alternativa más amable al típico «¿Estás seguro?». En un gestor de tareas, archivar una tarea ocurre al instante y este toast con deshacer da unos segundos para cambiar de idea. Gmail hizo famoso el patrón, así que la gente lo entiende a la primera. La línea que se encoge marca el tiempo sin cuenta atrás.
Ofrece deshacer solo si de verdad puedes revertir la acción, lo que suele implicar esperar a que el toast desaparezca antes de borrar nada. Cinco segundos sirven para casi todo; en acciones masivas, como archivar cincuenta correos, deja algo más.