Élément archivéPuedes recuperarlo ahora.
HTML + CSSNotifications

Toast avec annulation

Confirme une action avec un bouton « Annuler » et une fine ligne qui raccourcit pour montrer le temps restant.

Réglages

16px
1x

Code

<div class="uv-zu"><button class="fire">Archiver</button><div class="toast"><span><b>Élément archivé</b><small>Vous pouvez le récupérer maintenant.</small></span><button class="undo">Annuler</button><i></i></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Notifications

Où l’utiliser

L'alternative la plus aimable au fameux « Êtes-vous sûr ? ». Dans un gestionnaire de tâches, archiver une tâche se fait tout de suite, et ce toast avec bouton annuler laisse quelques secondes pour changer d'avis. Gmail a rendu le principe familier, tout le monde le comprend. La ligne qui rétrécit montre le temps restant sans compte à rebours.

Ne proposez l'annulation que si l'action est vraiment réversible, ce qui veut souvent dire attendre la fin du toast avant de supprimer pour de bon. Cinq secondes suffisent la plupart du temps ; pour une action groupée, comme archiver cinquante e-mails, laissez un peu plus.