Toast WIP
Temporary notification messages using the native
<output> element — a semantic live region with
implicit aria-live="polite". CSS handles the animation
lifecycle; the View Transitions API smoothly repositions existing toasts
when new ones arrive.
Default
<button onclick="toast('File saved')">Save</button>
<output id="toasts"></output>
<script>
let toastId = 0;
function toast(text) {
const out = document.querySelector("output");
const p = document.createElement("p");
p.textContent = text;
const add = () => out.appendChild(p);
if (document.startViewTransition) {
const vt = document.startViewTransition(add);
vt.finished.then(() => {
p.style.viewTransitionName = "toast-" + toastId++;
});
} else {
add();
}
p.addEventListener("animationend", () => {
const remove = () => p.remove();
document.startViewTransition
? document.startViewTransition(remove)
: remove();
});
}
</script>Duration
Control display time with the
--toast-duration CSS custom property (default
3s).
toast('This one lingers', 6) // The second arg sets --toast-duration on the
element