Toast Error
Notification rouge auto-dismiss : showToast() injecte dynamiquement un toast dans #toastContainer, icône X SVG incluse, retrait automatique après 3 secondes.
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
L'effet expose une fonction globale showToast(type, message). À l'appel, elle récupère document.getElementById('toastContainer') et y injecte un <div class="toast error"> créé dynamiquement — aucun élément HTML pré-existant n'est requis hormis ce conteneur, que vous positionnez librement dans votre mise en page.
L'icône SVG est construite en JavaScript selon le type passé en paramètre : un cercle barré de deux lignes croisées pour 'error' (icône X), un chemin en V pour 'success', un cercle exclamatif pour 'info'. Ces balises SVG sont inlinées dans innerHTML via un template literal, sans aucune dépendance externe.
Le dismissal automatique repose sur deux setTimeout imbriqués : à 3 000 ms, la classe hiding est ajoutée sur le toast (c'est là que vous définissez votre transition CSS opacity/transform) ; à 3 300 ms, element.remove() retire définitivement le nœud du DOM — propre, sans accumuler d'éléments orphelins.
La couleur rouge est portée par background: linear-gradient(135deg, #ef4444, #dc2626) sur .toast.error. Le positionnement fixe du conteneur, les styles de base du toast (padding, font, border-radius) et l'animation d'entrée ne sont pas inclus dans le code fourni — vous les définissez librement selon votre design system.
Accessibilité
- prefers-reduced-motion absent : le code ne détecte pas cette préférence. Si votre CSS d'entrée utilise une animation de translation ou d'opacité, ajoutez
@media (prefers-reduced-motion: reduce) { .toast { transition: none; animation: none; } }pour respecter WCAG 2.3.3. - Le conteneur
#toastContainerdoit porterrole="region"etaria-live="assertive"pour que les lecteurs d'écran annoncent immédiatement le message d'erreur — ces attributs ne sont pas dans le code fourni et doivent être ajoutés à votre HTML. - Le bouton déclencheur est un
<button>natif : focusable au clavier, activable à Entrée et Espace, correctement annoté par son texte visible. - Contraste : texte blanc (#ffffff) sur fond rouge foncé (#dc2626). Ratio ≥ 4,5:1 — conforme WCAG AA. La valeur claire (#ef4444) descend à ~3,9:1 : gardez le texte sur la zone sombre du dégradé ou épaississez la police.
- Le toast est supprimé du DOM après 3 secondes : pour un message long, augmentez le timeout à 5 000–7 000 ms afin de respecter le critère de durée suffisante de WCAG 2.2.1.
Compatibilité navigateur
Utilise uniquement les APIs DOM de base (createElement, getElementById, setTimeout) — disponibles partout, aucune dépendance.
Si <code>#toastContainer</code> est absent au moment de l'appel, <code>showToast()</code> retourne silencieusement — aucune erreur JS, la page reste intacte.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div id="toastContainer"
role="region"
aria-live="assertive"
aria-label="Notifications">
</div>
<button class="toast-trigger error"
onclick="showToast('error', 'Message d\'erreur')">
Afficher l'erreur
</button>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 |
|---|---|---|
| 3e3 (délai dismiss) | 3000 ms | Durée d'affichage avant l'ajout de .hiding. Changez à 5000 pour les messages longs. Premier setTimeout dans showToast(). |
| 300 (délai remove) | 300 ms | Délai entre .hiding et le retrait du DOM — doit correspondre à la durée de votre transition CSS. Deuxième setTimeout dans showToast(). |
| .toast.error (CSS) | linear-gradient(135deg, #ef4444, #dc2626) | Couleur de fond du toast erreur. Remplacez les stops hex par votre palette brand. |
| #toastContainer (positionnement) | non inclus | Ajoutez dans votre CSS : position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px. |
| .toast (styles de base) | non inclus | Définissez : display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; color:#fff; font-size:13px; font-weight:500; min-width:220px; box-shadow:0 4px 20px rgba(0,0,0,.35). |
| .hiding (animation sortie) | non inclus | Classe ajoutée à 3 s. Définissez : opacity:0; transform:translateY(-6px); transition:opacity .3s,transform .3s pour une sortie fluide. |
| 'toastContainer' (id du conteneur) | "toastContainer" | ID codé en dur dans showToast(). Si votre conteneur a un autre id, modifiez la ligne getElementById('toastContainer') dans le JS. |
FAQ
document.getElementById('toastContainer') et retourne silencieusement si l'élément est absent du DOM. Vérifiez qu'un <div id="toastContainer"></div> est bien présent dans votre HTML avant que le script ne s'exécute.display:flex; flex-direction:column; gap:8px sur #toastContainer pour les empiler proprement.setTimeout dans showToast() est réglé à 3e3 (3 000 ms). Changez cette valeur pour allonger ou raccourcir l'affichage. Pensez à ajuster en cohérence la durée de transition CSS sur .hiding et le deuxième timeout (300 ms) qui synchronise le retrait du DOM.
