Toast Stack
Trois types de toast (succès, erreur, info) s'empilent avec 300 ms d'écart et disparaissent seuls — séquence orchestrée par de simples setTimeouts.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
showToast(type, message) crée un <div class="toast {type}"> avec une icône SVG inline (checkmark pour success, croix pour error, info-cercle pour info) et le message en texte brut, puis l'ajoute à #toastContainer via appendChild. Un premier setTimeout à 3 000 ms ajoute la classe hiding, déclenchant la transition CSS de sortie ; un second setTimeout à 300 ms supprime l'élément du DOM.
showMultipleToasts() enchaîne trois appels à showToast avec des délais de 0, 300 et 600 ms. L'empilement résulte du comportement naturel du container flex-colonne : chaque toast s'insère en bas de la pile sans calcul de position — la hauteur du container s'adapte automatiquement et les toasts déjà visibles restent en place.
L'animation d'entrée est portée par CSS : un keyframe fait glisser le toast depuis la droite (translateX(100% + gap), opacity 0 → 1) en ~300 ms. La sortie inverse ce mouvement quand hiding est appliqué. Le délai de 300 ms entre l'ajout de hiding et la suppression du DOM laisse la transition se compléter proprement avant que le reflow se produise.
Le JS n'utilise aucune bibliothèque externe : uniquement document.createElement, appendChild, classList et setTimeout. Les icônes sont entièrement inline en SVG — aucun import de sprite, aucune font-icon.
Accessibilité
- prefers-reduced-motion : absent du code — l'animation de glissement s'applique toujours, y compris pour les utilisateurs qui ont activé la préférence système. À corriger en ajoutant
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }. #toastContainern'est pas déclaréaria-livenirole="status": les lecteurs d'écran (NVDA, VoiceOver) n'annoncent pas les toasts automatiquement. Ajoutezaria-live="polite"ouaria-live="assertive"selon l'urgence du message.- Les icônes SVG n'ont ni
aria-labelni<title>, et ne portent pasaria-hidden="true"— elles sont transmises aux technologies d'assistance comme des graphiques sans nom. - Le bouton déclencheur (
.toast-trigger) est un<button>natif, clavier-accessible et focusable sans JavaScript supplémentaire. - Le contraste fond/texte des toasts doit être vérifié en contexte d'intégration : la valeur de fond
#1a1a2esur fond sombre du site peut dégrader la lisibilité si le container n'est pas opaque.
Compatibilité navigateur
Repose uniquement sur des APIs DOM standard (createElement, classList, setTimeout) et des transitions CSS — aucun polyfill requis.
Sans JS, le bouton est inactif et aucun toast n'apparaît — la page reste fonctionnelle. Si <code>#toastContainer</code> est absent du DOM, <code>showToast()</code> retourne silencieusement (<code>if (!s) return</code>) sans erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="toast-container" id="toastContainer"></div>
<div class="component-demo">
<button class="toast-trigger stack" onclick="showMultipleToasts()">
Afficher Toasts Empilés
</button>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| setTimeout 3000 | 3 000 ms | Durée d'affichage avant dismiss automatique. Modifiez 3e3 (premier setTimeout dans showToast) par la valeur souhaitée en millisecondes. |
| Délais 300 / 600 ms | 300 ms / 600 ms | Écarts entre les toasts 2 et 3 dans showMultipleToasts(). Réduisez à 150/300 pour une rafale rapide, augmentez à 600/1200 pour un rythme narratif. |
| CSS .toast.success | border-left #10b981 | Couleur emerald de la bordure gauche et de l'icône pour les toasts de succès. Remplacez par votre couleur brand. |
| CSS .toast.error | border-left #ef4444 | Couleur rouge de la bordure gauche et de l'icône pour les toasts d'erreur. |
| CSS .toast.info | border-left #6366f1 | Couleur indigo de la bordure gauche et de l'icône pour les toasts d'information. |
| showToast(type, msg) | — | Appelez directement cette fonction pour un toast unique. type accepte 'success', 'error' ou 'info' — la string devient la classe CSS du toast. |
| Icônes SVG | inline dans showToast() | Modifiez les blocs SVG dans showToast() par branche conditionnelle pour adapter les icônes à votre design system (Heroicons, Lucide, Phosphor...). |
FAQ
showToast() le cherche via getElementById('toastContainer') et retourne silencieusement si l'élément est absent (if (!s) return). Ajoutez <div id="toastContainer" class="toast-container"></div> n'importe où dans le <body>, idéalement juste avant </body>.showToast(type, message) directement plutôt que showMultipleToasts(). Pour un singleton strict (un seul toast visible), videz le container avant chaque appel : document.getElementById('toastContainer').innerHTML = '', ou filtrez via une variable de verrou côté appelant.showToast() dans les callbacks .then() / .catch(). Exemple : fetch('/api/save').then(r => r.ok ? showToast('success','Sauvegardé !') : showToast('error','Echec')).catch(() => showToast('error','Erreur réseau')). Pour une séquence multi-étapes, enchaînez plusieurs .then() avec des setTimeout imbriqués pour respecter le timing visuel.
