Toast

Single toast

Make the toast a manual popover, so it stays until it is closed. A button with popovertarget opens it, and a .close button inside dismisses it. From a script, call showPopover() and hidePopover().

Colors

A color class sets the color. Without one the toast uses the contrast color.

Stacked toasts

To show several at once, add and remove .toast elements inside a .toasts live region. Screen readers announce each new toast.

<div class="toasts" aria-live="polite"></div>

<script>
  function toast(message, color = "") {
    const item = document.createElement("div");
    item.className = `toast ${color}`;
    item.textContent = message;
    document.querySelector(".toasts").append(item);
    setTimeout(() => item.remove(), 4000);
  }
  toast("Saved", "success");
</script>

Variables