Toast de succès élastique
Un message de succès qui remonte du bas en rebondissant avec une coche verte, reste un instant puis s'éclipse.
Réglages
Code
<div class="uv-zs"><button class="fire">Afficher le toast</button><div class="toast"><i>✓</i><span><b>Modifications enregistrées</b><small>Tout est synchronisé.</small></span></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
Juste après une action importante, on a surtout besoin d'être rassuré. Dans une application bancaire, après l'envoi d'un virement, « Virement envoyé » apparaît avec sa coche verte et une ligne de détail, puis disparaît de lui-même. Un toast de succès en HTML et CSS, avec une entrée élastique qui rassure sans en faire trop.
Réservez-le aux actions terminées, pas à celles encore en cours. Écrivez le résultat plutôt que l'action : « 250 € envoyés à Ana » en dit plus que « Succès ». Si le message contient un montant ou une référence, laissez-le un peu plus longtemps à l'écran.