Toast notification

How to use it

Use for a brief confirmation after an action the user already completed, such as saving. Keep the message short, do not put a required action inside it, and let it disappear on its own after a few seconds rather than requiring dismissal.

Accessibility

role="status" with aria-live="polite" makes assistive tech announce the message once it appears, without moving keyboard focus or interrupting whatever the user is doing. The decorative checkmark is aria-hidden so it is not announced on its own. White text on the dark green fill meets 7.68:1 contrast.

Source (copy-ready)

<div class="dcl-toast-demo">
  <button type="button" class="dcl-button dcl-button--primary" id="dcl-toast-trigger">Save changes</button>
  <div class="dcl-toast" id="dcl-toast" role="status" aria-live="polite" hidden>
    <span class="dcl-toast__icon" aria-hidden="true">&#10003;</span>
    Changes saved successfully.
  </div>
</div>
<style>
.dcl-button { font: inherit; padding: 0.6rem 1.25rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.dcl-button--primary { background-color: #1d4ed8; color: #ffffff; }
.dcl-button--primary:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.dcl-toast { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 6px; background-color: #065f46; color: #ffffff; font: inherit; }
</style>
<script>
(function () {
  var trigger = document.getElementById("dcl-toast-trigger");
  var toast = document.getElementById("dcl-toast");
  var hideTimer = null;

  trigger.addEventListener("click", function () {
    toast.hidden = false;
    if (hideTimer) { window.clearTimeout(hideTimer); }
    hideTimer = window.setTimeout(function () { toast.hidden = true; }, 4000);
  });
})();
</script>