Générateur de Toast IA.

Décrivez le comportement de vos notifications et MeDo génère le système de toast complet — quatre types sémantiques, une file d'attente d'empilement, des minuteurs de fermeture automatique qui se mettent en pause au survol, la fermeture par balayage au toucher et le niveau de politesse aria-live correct pour chaque type.

Un toast est un minuteur, une file d'attente et une live region déguisés en boîte

La partie visuelle d'un toast prend quelques minutes. Tout ce qui se trouve en dessous, non. Un toast doit décider combien de temps il reste, ce qui se passe quand trois arrivent en même temps, ce qui se passe quand l'utilisateur est au milieu d'une phrase dans un formulaire, et comment un lecteur d'écran l'énonce sans être interrompu. La conséquence non évidente : les bugs de toast se manifestent comme des bugs de confiance. Une confirmation d'enregistrement qui disparaît avant d'être lue, ou une erreur qui s'évapore pendant que l'utilisateur lit le champ concerné, apprend aux gens à ne plus croire l'interface. Générer ensemble les règles de temporisation, les limites de file d'attente et la politesse de la live region maintient ces décisions cohérentes au lieu de les éparpiller dans chaque point d'appel qui a déclenché la notification.

6 modèles

Modèles de Toast que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code React + Tailwind.

BasicFour Tones

Success, Error, Warning, Info Stack

The baseline set, and the only one where per-type rules matter more than styling. Errors that auto-dismiss are the single most common toast bug in production.

Create a toast system with four semantic types — success with a check icon and green accent, error with an alert icon and red accent, warning with a triangle and amber accent, info with a circle and blue accent. Each toast is 360px wide with a 12px radius, 16px padding, a semibold title, an optional description and a close button with an accessible label. Stack in the bottom-right with 8px gaps, newest on top, three visible at once and the rest queued. Auto-dismiss success, info and warning after 5000ms; keep errors until the user closes them. Wrap non-error toasts in role="status" with aria-live="polite" and give errors role="alert". Slide in 16px from the right and fade out; under prefers-reduced-motion, fade only.

Tester dans MeDo

TimingPausable Timer

Countdown Bar That Freezes on Hover

A visible progress bar plus a timer that stops while the pointer or keyboard focus is on the toast. Without the pause, a toast can vanish while the user is reaching for its own action button.

Create a toast with a visible dismiss countdown: a 2px progress bar along the bottom edge animating from full to zero over the toast duration. Pause the timer and freeze the bar on pointerenter and on focusin anywhere inside the toast, then resume from the remaining time on pointerleave and focusout — track elapsed time explicitly rather than restarting the interval, or the toast will live longer every time the pointer crosses it. Reset to the full duration when the toast content is updated in place. Under prefers-reduced-motion, replace the animated bar with a static severity stripe and keep the timer behaviour unchanged. Keep the toast in a role="status" region with aria-live="polite".

Tester dans MeDo

UndoAction Toast

Toast With an Undo or Retry Action

The moment a toast carries a button, it stops being decoration and becomes the only route to a reversible operation — so it must not auto-dismiss while the action is still valid.

Create a toast variant with a single inline action button — Undo or Retry — beside the close control. Do not auto-dismiss while an action is present unless the caller passes an explicit duration, and never dismiss on a timer shorter than the window in which the action is still valid server-side. Move keyboard focus nowhere on mount; instead expose the toast region via a landmark and make the action reachable through a documented shortcut plus normal tab order, so a toast never steals focus from a form the user is typing in. Announce the toast with role="status" and aria-live="polite", and include the action label in the announced text so the option is heard, not just seen.

Tester dans MeDo

AsyncPromise Toast

One Toast That Updates in Place

Pending, then success or error, on the same node. Firing a second toast when a request resolves stacks two notifications about one event and doubles the screen reader announcement.

Create a promise-driven toast that mounts in a pending state with a spinner and a loading title, then updates the same toast node to success or error when the promise settles rather than mounting a second toast. Keep the toast ID stable across the transition so the stack position does not change, swap the icon and accent, and start the auto-dismiss timer only once the promise resolves. On rejection, switch the container to role="alert" and cancel auto-dismiss. Because the live region content changes in place, debounce the announcement so a request that resolves in under 400ms announces the final state only. Cap the pending state with a timeout that converts to an error toast rather than spinning forever.

Tester dans MeDo

MobileSwipe Toast

Top-Center Toast With Swipe Dismiss

On a phone the bottom corner is under the thumb and the home indicator. Top-center with a horizontal drag threshold is the only placement that does not fight the platform.

Create a mobile-first toast pinned to the top-center with a safe-area inset using env(safe-area-inset-top), full width minus 16px gutters, capped at a single line of title text with the description truncated to two lines. Add horizontal swipe-to-dismiss with a 60px or 40% drag threshold, translating with the pointer and springing back below the threshold; suppress the pointer handlers while the user is scrolling the page underneath. Keep the close button hit area at 44px even though the glyph is 16px. Show one toast at a time and replace rather than stack, since a stack on a 375px viewport covers the content. Use role="status" with aria-live="polite" and disable the spring under prefers-reduced-motion.

Tester dans MeDo

SnackbarCompact Snackbar

Single-Line Bar With No Icon

One line, no title, no icon — for low-stakes confirmations like "Link copied" where a 360px card with an icon block is more furniture than the message deserves.

Create a compact snackbar toast: a single line of 14px text on a dark surface, 8px radius, 12px vertical and 16px horizontal padding, no icon and no separate title, with an optional text-only action on the right. Anchor it bottom-center with a 24px offset and allow only one at a time — a new snackbar replaces the current one and resets its 4000ms timer instead of queueing, because these fire from rapid interactions like copy and toggle. Announce via role="status" with aria-live="polite", and when the text is identical to the previous message, force re-announcement by clearing the live region for one frame. Fade and lift 8px on entry; fade only under prefers-reduced-motion.

Tester dans MeDo

Comment personnaliser votre Toast

Donnez aux erreurs des règles différentes de tout le reste

Demandez la fermeture automatique pour success, info et warning, et que les erreurs persistent jusqu'à fermeture. Les erreurs exigent généralement une action de l'utilisateur, et un message qui s'efface avant d'être compris est pire qu'aucun message.

Fixez une limite d'empilement et définissez le débordement

Précisez combien de toasts peuvent être visibles simultanément — trois est un plafond raisonnable — et si les surplus attendent en file ou remplacent le plus ancien. Sans limite, une boucle qui déclenche une notification par élément recouvrira tout le viewport.

Demandez la mise en pause du minuteur au survol et au focus

Demandez dans le prompt que le décompte de fermeture se fige tant que le pointeur est sur le toast ou qu'un contrôle à l'intérieur a le focus clavier. Sinon un toast peut disparaître pendant que l'utilisateur tend la main vers son propre bouton d'action.

Nommez le coin et la zone de sécurité

Choisissez un emplacement et décrivez-le : en bas à droite reste à l'écart de la plupart des navigations principales, en haut au centre se lit le plus vite. Sur mobile, demandez un padding env(safe-area-inset-bottom) pour que les toasts n'atterrissent pas sous l'indicateur d'accueil ou une barre d'onglets fixe.

Qui utilise le composant Toast

Produit SaaS

De courts toasts de succès confirmant les enregistrements automatiques et les invitations, avec des toasts d'erreur persistants portant une action « Réessayer » lorsqu'une synchronisation en arrière-plan échoue. Le placement en bas à droite les éloigne de la barre latérale de l'application.

Boutique e-commerce

Un toast « Ajouté au panier » avec une vignette et un lien « Voir le panier », qui se ferme après cinq secondes. Les échecs de stock et de paiement utilisent le type erreur et restent affichés pour que l'acheteur puisse lire ce qui a échoué.

Tableau de bord ou outil d'administration

Les opérations en masse émettent un seul toast récapitulatif plutôt qu'un par enregistrement, et les tâches longues mettent à jour un unique toast sur place de « en cours » à « réussi » au lieu d'empiler une seconde notification par-dessus.

Application web mobile

Des toasts en haut au centre avec fermeture par balayage et safe-area insets, dimensionnés sur une seule ligne pour ne jamais couvrir le champ dans lequel l'utilisateur saisit du texte.

Modèles de Toast pour différents sites web

Le même composant toast, adapté au type de site sur lequel il est publié.

01 / 06

SaaS Product Toasts

Autosave confirmations and invite receipts, bottom-right so they clear the sidebar. The rule that matters most here is that background-sync failures get persistent error toasts with a Retry action — a sync error that dismisses itself is indistinguishable from a sync that worked.

Styles et variantes de Toast

Choisissez la variante qui correspond au reste de la page, puis générez-la.

01 / 06

Card Toast With Icon and Accent

The full anatomy: icon, semibold title, description, close button, colored accent. Worth the vertical space when the message has a subject and a detail. It is overkill for "Copied" — use the snackbar for those.

Toast en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même toast, six façons de l'intégrer.

01 / 06

React Toast

A context provider holding the queue plus a portal for the container. Mount the provider once above the router so navigating between routes does not unmount the toast that was just fired.

src/components/ToastProvider.tsx

export function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([])
  const push = (t) => setToasts((prev) => [...prev, { id: uid(), ...t }])

  return (
    <ToastContext.Provider value={{ push }}>
      {children}
      {createPortal(<ToastStack toasts={toasts} />, document.body)}
    </ToastContext.Provider>
  )
}

Comment ajouter votre Toast à un projet

Quatre étapes, du choix d'un modèle de toast à sa mise en production.

01~30s

Pick a Toast Pattern

Choose by the event, not the look: the four-tone stack for general notifications, the promise toast for async jobs, the action toast for anything reversible, the swipe variant for phone-first surfaces.

02~10s

Copy the Prompt

Take it into MeDo, Lovable, Bolt, v0 or Cursor. Set the duration and the stack limit before you run it, and decide there whether errors auto-dismiss — that is the decision you will otherwise relitigate at every call site.

03~1min

Generate and Refine

You get the provider, the queue and the toast back with a live preview. Follow up in plain English — "pause the timer on hover", "move it to top-center on mobile", "cap the stack at two" — instead of hand-editing timer logic.

04~2min

Mount the Provider Once

Put it above the router in your root layout so a toast fired just before a navigation survives it, then fire one from a real form submit and confirm a screen reader announces it without cutting off the page.

Questions fréquentes à propos de Toast

Comment générer un composant de notification toast avec l'IA ?

Décrivez les types sémantiques, le placement et la temporisation dans un seul prompt — par exemple « des toasts success, error, warning et info empilés en bas à droite, fermeture automatique après 5 secondes sauf pour les erreurs » — et MeDo génère le provider, la file d'attente et le toast lui-même. Vous obtenez la fonction de déclenchement en même temps que le balisage, pas une boîte statique qu'il faut encore brancher.

Combien de temps un toast doit-il rester à l'écran ?

Quatre à six secondes conviennent pour une confirmation courte, et 5000ms est une valeur par défaut raisonnable. Les messages plus longs ont besoin de plus de temps car c'est la vitesse de lecture, non l'esthétique, qui fixe le plancher. Les erreurs et tout ce qui comporte un bouton d'action ne devraient pas se fermer automatiquement.

Quelle est la différence entre une alerte et un toast ?

Un toast est transitoire et flotte au-dessus de la page dans un coin fixe : il convient pour confirmer quelque chose que l'utilisateur vient de faire. Une alerte en ligne fait partie du flux du document et persiste jusqu'à ce que la condition change : elle convient pour un état qui survit à une action unique — un moyen de paiement en échec, une fenêtre de maintenance, une erreur au niveau du formulaire. Si l'utilisateur doit pouvoir revenir et le relire, utilisez une alerte.

Un toast doit-il utiliser role="status" ou role="alert" ?

Utilisez role="status" avec aria-live="polite" pour les toasts de succès et d'information, afin que l'annonce attende une pause dans la parole. Réservez role="alert", implicitement assertif et interruptif, aux erreurs et avertissements qui exigent une attention immédiate. Marquer chaque toast comme alerte fait que le lecteur d'écran parle sans cesse par-dessus l'utilisateur.

Puis-je empiler plusieurs toasts sans qu'ils se chevauchent ?

Oui. Demandez à MeDo un conteneur de toasts qui affiche une pile limitée avec un écart fixe et met en file tout ce qui dépasse la limite, libérant l'élément suivant dès qu'un toast se ferme. Ajouter une transition de sortie et réserver la hauteur de l'élément qui part jusqu'à la fin de l'animation empêche les toasts restants de sauter.

Un toast fonctionne-t-il sur les appareils tactiles ?

Oui, si vous demandez la prise en charge des gestes. Précisez la fermeture par balayage horizontal avec un seuil de glissement, gardez le bouton de fermeture à au moins 44px de zone tactile et ajoutez un padding safe-area inset pour que le toast dégage l'indicateur d'accueil et toute barre inférieure fixe.

Générez votre toast maintenant.

Testez n'importe quel prompt — gratuit, sans inscription.

Commencer gratuitement Voir les tarifs

Alerte

Décrivez le message et MeDo génère l'ensemble complet des alertes en ligne — variantes info, succès, avertissement et erreur avec barre d'accent, icône, titre, description, lien d'action optionnel et un bouton de fermeture lorsque l'alerte n'est pas permanente.

Composants associés

Modale

Décrivez le dialogue dont vous avez besoin et MeDo génère l'ensemble — en-tête, corps défilant et pied d'actions, plus la capture du focus, la restauration du focus à la fermeture, le blocage du scroll du body et une variante bottom sheet pour mobile.

Composants associés

Badge

Décrivez vos états et MeDo génère l'ensemble complet de badges — pastilles de statut sémantiques, tags supprimables, compteurs numériques avec débordement 99+ et indicateurs en point qui se posent sur un avatar sans être rognés.

Composants associés