MeDo

Generatore di Toast IA.

Descrivi il comportamento delle tue notifiche e MeDo genera il sistema di toast completo — quattro tipi semantici, una coda di impilamento, timer di chiusura automatica che si mettono in pausa al passaggio del mouse, chiusura con swipe al tocco e la giusta cortesia aria-live per ogni tipo.

Toast
Toast

Un toast è un timer, una coda e una live region travestiti da riquadro

La parte visiva di un toast richiede minuti. Tutto ciò che c'è sotto no. Un toast deve decidere quanto resta, cosa succede quando ne arrivano tre insieme, cosa succede quando l'utente è a metà di una frase in un modulo e come uno screen reader lo pronuncia senza essere interrotto. La conseguenza meno ovvia è che i bug dei toast si manifestano come bug di fiducia: una conferma di salvataggio che svanisce prima di essere letta, o un errore che scompare mentre l'utente sta leggendo il campo a cui si riferisce, insegna alle persone a non credere all'interfaccia. Generare insieme le regole di temporizzazione, i limiti della coda e la cortesia della live region mantiene quelle decisioni coerenti invece di sparpagliarle in ogni punto di chiamata che ha lanciato la notifica.

6 modelli

Modelli di Toast che puoi generare

Ogni modello è un prompt reale, non uno screenshot. Copialo in qualsiasi editor IA, oppure eseguilo in MeDo e ottieni codice 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.

Prova in 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".

Prova in 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.

Prova in 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.

Prova in 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.

Prova in 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.

Prova in MeDo

Come personalizzare il tuo Toast

Dai agli errori regole diverse da tutto il resto

Chiedi la chiusura automatica per success, info e warning, e che gli errori persistano fino alla chiusura manuale. Gli errori solitamente richiedono un'azione dell'utente, e un messaggio che si rimuove prima di essere compreso è peggio di nessun messaggio.

Imposta un limite di impilamento e definisci cosa fa l'eccedenza

Specifica quanti toast possono essere visibili contemporaneamente — tre è un tetto ragionevole — e se quelli in più si accodano dietro o sostituiscono il più vecchio. Senza un limite, un ciclo che lancia una notifica per elemento tappezzerà l'intera viewport.

Chiedi che il timer si metta in pausa al passaggio del mouse e al focus

Nel prompt richiedi che il conto alla rovescia si congeli mentre il puntatore è sopra il toast o un controllo al suo interno ha il focus da tastiera. Altrimenti un toast può scomparire mentre l'utente sta allungando la mano verso il suo stesso pulsante di azione.

Indica l'angolo e la safe area

Scegli una posizione e descrivila: in basso a destra sta lontano dalla maggior parte delle navigazioni principali, in alto al centro si legge più rapidamente. Su mobile chiedi il padding env(safe-area-inset-bottom) così i toast non finiscono sotto l'home indicator o una barra di tab fissa.

Chi usa il componente Toast

Prodotto SaaS

Brevi toast di successo che confermano salvataggi automatici e inviti, con toast di errore persistenti che portano un'azione "Riprova" quando una sincronizzazione in background fallisce. La posizione in basso a destra li tiene lontani dalla sidebar dell'app.

Negozio e-commerce

Un toast "Aggiunto al carrello" con una miniatura e un link "Vedi carrello", che si chiude dopo cinque secondi. Gli errori di disponibilità e di pagamento usano il tipo error e restano fermi così l'acquirente può leggere cosa è andato storto.

Dashboard o strumento di amministrazione

Le operazioni in blocco emettono un unico toast riepilogativo invece di uno per record, e i processi lunghi aggiornano un solo toast sul posto da in attesa a completato anziché impilare una seconda notifica sopra.

Web app mobile

Toast in alto al centro con chiusura tramite swipe e safe-area inset, dimensionati su una sola riga così da non coprire mai il campo in cui l'utente sta scrivendo.

Pattern di Toast per siti web diversi

Lo stesso componente toast, calibrato sul tipo di sito su cui viene pubblicato.

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.

Stili e varianti di Toast

Scegli la variante che si adatta al resto della pagina, poi generala.

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 in React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: lo stesso toast, sei modi per integrarlo.

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>
  )
}

Come aggiungere il tuo Toast a un progetto

Quattro passaggi, dalla scelta di un modello di toast alla messa in produzione.

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.

Domande comuni su Toast

Come genero un componente di notifica toast con l'IA?

Descrivi i tipi semantici, la posizione e i tempi in un unico prompt — per esempio "toast success, error, warning e info impilati in basso a destra, chiusura automatica dopo 5 secondi tranne gli errori" — e MeDo genera il provider, la coda e il toast stesso. Ottieni la funzione di attivazione insieme al markup, non un riquadro statico che devi ancora collegare.

Quanto tempo dovrebbe restare un toast sullo schermo?

Da quattro a sei secondi funziona per una breve conferma, e 5000ms è un valore predefinito sensato. I messaggi più lunghi richiedono più tempo perché è la velocità di lettura, non l'estetica, a fissare la soglia minima. Gli errori e tutto ciò che ha un pulsante di azione non dovrebbero chiudersi automaticamente.

Qual è la differenza tra un alert e un toast?

Un toast è transitorio e galleggia sopra la pagina in un angolo fisso, quindi è adatto a confermare qualcosa che l'utente ha appena fatto. Un alert inline fa parte del flusso del documento e persiste finché la condizione non cambia, quindi è adatto a uno stato che sopravvive a una singola azione: un metodo di pagamento non valido, una finestra di manutenzione, un errore a livello di modulo. Se l'utente deve poter tornare a leggerlo, usa un alert.

Un toast dovrebbe usare role="status" o role="alert"?

Usa role="status" con aria-live="polite" per i toast di successo e informativi, così l'annuncio attende una pausa nel parlato. Riserva role="alert", implicitamente assertivo e interrompente, agli errori e agli avvisi che richiedono attenzione immediata. Marcare ogni toast come alert fa sì che lo screen reader parli continuamente sopra l'utente.

Posso impilare più toast senza che si sovrappongano?

Sì. Chiedi a MeDo un contenitore di toast che renderizzi una pila limitata con spaziatura fissa e accodi tutto ciò che supera il limite, rilasciando l'elemento successivo quando uno si chiude. Aggiungere una transizione di uscita e riservare l'altezza dell'elemento che esce fino al termine dell'animazione evita che i toast rimanenti saltino.

Un toast funziona sui dispositivi touch?

Funziona se chiedi il supporto ai gesti. Specifica la chiusura con swipe orizzontale con una soglia di trascinamento, mantieni il pulsante di chiusura con almeno 44px di area toccabile e aggiungi il padding safe-area inset così il toast lascia libero l'home indicator e qualsiasi barra inferiore fissa.

Crea il tuo toast adesso.

Prova qualsiasi prompt — gratis, nessuna registrazione richiesta.

Inizia a costruire gratisVedi i prezzi
Alert

Alert

Descrivi il messaggio e MeDo genera il set completo di alert inline — varianti info, successo, avviso ed errore con barra d'accento, icona, titolo, descrizione, link d'azione opzionale e un controllo di chiusura quando l'alert non è permanente.

Componenti correlati
Modale

Modale

Descrivi il dialogo che ti serve e MeDo genera tutto — intestazione, corpo scorrevole e footer con le azioni, più cattura del focus, ripristino del focus alla chiusura, blocco dello scroll del body e una variante bottom sheet per mobile.

Componenti correlati
Badge

Badge

Descrivi i tuoi stati e MeDo genera l'intero set di badge — pill di stato semantiche, tag rimovibili, contatori numerici con overflow 99+ e indicatori a punto che si appoggiano su un avatar senza venire tagliati.

Componenti correlati