Toast

A toast notifications, built into your site with no plugin and no library. A short message in a corner after something happened, made by script: window.__superheroToast.show({ text, kind, action, timeout }) or a data-toast button. One polite live region per page; timers pause on hover, on focus and in a hidden tab; a toast with an action never leaves by itself; at most three at once; Escape closes the focused one; no slide under reduced motion. Without JavaScript nothing renders.

Toasts appear at the bottom right of this page. Hover or focus one and its timer stops; Escape closes the one with focus; one with an action stays until it is used or closed. At most three show at once. Without JavaScript nothing appears: a toast only exists because a script made one.

A quiet “Saved” or “Link copied” in the corner that confirms the click and gets out of the way, with an Undo when one is needed.

Also called

snackbartoast notificationtoastrNotyfflash messagepop-up notificationgrowl notification

What it replaces

toastr / Notyf / SweetAlert toasts
page-builder notification pop-ins
Material snackbars

Good for

Confirming an action that worked where the visitor already is: saved, copied, sent, added to the cart, archived (with Undo). Short, and fine to miss, because the page already shows the result.

Not for

Anything that must be read or that must exist without JavaScript: errors a visitor has to fix, a form’s result, a warning before they act. Those are a notice, in the page. Also not for marketing (that is modal or announcement-bar), and not a second <Toast /> on a page: there is one region.

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

One region per page, role="region" named “Notifications” with aria-live="polite": each toast is read once when it appears, without interrupting. The kind is said in words for success, warning and danger (“Error: …”); icons are aria-hidden.
Timing is adjustable: every timer pauses while the pointer is over a toast, while focus is in one and while the tab is hidden, and resumes with the time it had left. A toast with an action never leaves by itself, so its action can always be reached. Shorter than 4 s is raised to 4 s.
Each toast has a 44px close button named “Dismiss notification”, and Escape closes the toast with focus. When a focused toast leaves, focus goes to the next toast or back to where it was before, never to nowhere.
The region sits at the end of the page, so Tab reaches toasts after the content; screen-reader users can jump to the “Notifications” landmark.
Text is set as text, never parsed as HTML. An action href with a scheme other than http(s), mailto or tel (javascript:) is refused.
prefers-reduced-motion: toasts appear and leave at once, with no slide or fade.
Without JavaScript nothing renders: the region is hidden until the script mounts it, and a toast only exists because a script made one. Use a notice for anything that must exist without JavaScript.

Where it's live

superherotech.ai: /elements/toast/ (demo)

How to ask for it

“The toast on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.

More in Feedback & states

See them all working

Loading
Show people the page heard them: a spinner where something is working, gray shapes where content is on its way, and a form that cannot be clicked twice while it saves.
Stepper
Show people where they are in a checkout or a sign-up, how far they have come and what is left, on a laptop or a phone.
Tooltip
A small explanation on a word or an info icon, there when someone points at it or tabs to it, and out of the way the rest of the time.
Notice
Say what just happened, or what needs attention, right where it applies, in a color that says how much it matters.