OneTaskBy Tim King · Updated
Toast Notification Generator
Accessible Toast Messages in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Toast Notification Generator works
A toast notification is a small message that pops up in a corner of the screen to confirm an action, then fades away by itself. Pick the type, position and timing, press the button in the preview to try it, and copy the HTML, CSS and JavaScript.
Toasts suit short, non-blocking feedback such as "Saved", "Copied" or "Message sent". The visitor can carry on working while the message shows, unlike a modal dialog that stops everything.
How the toast notification works
The page holds one empty container fixed to a corner of the screen. Each click adds a new toast to that container, so several toasts stack neatly instead of covering each other. After the chosen number of seconds the toast fades out and is removed. Setting the time to zero keeps it until the visitor closes it.
Accessibility
The container has role="status", which makes screen readers announce each new message politely,
without interrupting what they are reading. The close button has a spoken label, the icon is
hidden from assistive technology because the message already says what happened, and the slide-in
animation is switched off for anyone who prefers reduced motion.
FAQ
How long should a toast stay on screen?
Around four to six seconds suits a short message. Give longer messages more time, and never auto-dismiss a toast that contains a link or action the visitor may need to reach, because some people read or move slowly.
How do I show a toast from my own code?
Take the click handler body out into a function, for example showToast(), and call it wherever
your code finishes a task, such as after a form saves. The container and CSS stay the same.
Should errors use a toast?
Short, recoverable errors can. For errors the visitor must fix, such as a form field problem, show the message next to the field instead, since a toast disappears and is easy to miss.
What is the difference between a toast and a snackbar?
They are the same idea under different names. Snackbar is the Material Design term and usually means a toast along the bottom edge that may include one action button.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Social Proof Popup
Build a corner toast that cycles recent-activity messages.
Modal Builder
Build an accessible modal window with the native dialog element.
Cookie Banner
Build a lightweight cookie consent banner with Accept and Reject buttons.
Copy To Clipboard Button Generator
Copy to clipboard button for code blocks, inputs or fixed text.
CSS Button Generator
Design a button with hover, focus and disabled states.