HTML Toast Notification Generator

Toast notifications: ephemeral feedback done right

A toast is a small, transient message that appears at the edge of the screen, conveys the result of an action and disappears on its own a few seconds later. The metaphor — a piece of bread popping up from a toaster — was popularised by the Windows XP balloon notifications, but the modern shape comes from Android: Toast.makeText() shipped in Android 1.0 (2008) and rapidly migrated to the web through Twitter Bootstrap, Materialize and Material UI Snackbar.

The defining property is non-blocking: unlike alert() or a modal dialog, a toast never steals focus or interrupts the user's workflow. That makes it ideal for confirmations ("Saved", "Copied to clipboard", "Email sent") and for transient errors that the user can ignore ("Connection lost, retrying"), but a terrible fit for critical decisions that demand action.

Common variants

• success — green; positive confirmation, 3 seconds.
• error — red; failure that the user should notice but does not block them.
• info — blue; neutral status update.
• warning — amber/yellow; conditions that may need attention soon.

Positioning and timing

Most design systems default to top-right on desktop and bottom-center on mobile to avoid colliding with the thumb. Auto-dismiss timing is typically 3 seconds for short messages and 5–7 seconds for longer ones; persistent toasts (no auto-dismiss) should be reserved for critical errors and always include an explicit close button. When several toasts fire at once, stack them with a slight slide-in animation and rate-limit the queue to avoid overwhelming the screen.

Libraries

For React, the leading options are react-hot-toast (Tim Neutkens, ~10 kB), sonner (Emil Kowalski, used by Vercel and shadcn/ui), react-toastify (mature, feature-heavy) and the @radix-ui/react-toast primitive that powers shadcn/ui Toast. Vue uses vue-toastification or vue-sonner; Angular has ngx-toastr; framework-agnostic options include Notiflix and MUI's Snackbar.

Accessibility

Toasts must be exposed to assistive technology through an ARIA live region. Use role="status" with aria-live="polite" for routine confirmations and role="alert" with aria-live="assertive" for errors. Never trap focus inside a toast; if it carries an action ("Undo"), give the action keyboard reach via tabindex="0" and respect prefers-reduced-motion for the slide-in animation.

FAQ

Can a toast have an action button like "Undo"? Yes — Gmail popularised the pattern. Keep it to a single short action; if you need more, escalate to a modal.

Should I replace native alert() with toasts? Generally yes. alert() is synchronous and blocking; toasts integrate cleanly with async flows and don't break the event loop.

How is a toast different from the Notification API? The browser Notification API renders OS-level notifications outside the page (requires user permission). Toasts live inside the page and require no permission.

When should I avoid toasts? For destructive confirmations ("Delete account?"), long forms, or any flow where missing the message has real consequences. Use a modal instead.