<re-toast>

A custom-element wrapper that hosts a toast region in light DOM. Its .show(message, options) method matches the showToast() API and returns the same controller. See the custom elements overview for how the <re-*> tags work.

Import once to register the tag, then call .show(...):

import "@relements/core/elements/re-toast";

const toaster = document.querySelector("re-toast");
toaster.show("Saved.");
toaster.show("Upload complete.", { tone: "success" });
toaster.show("Network error.", { tone: "danger", duration: 8000 });

Trigger toasts

The buttons below call toaster.show(...) on the <re-toast> element:

Default Success Danger

Live example

<div class="row">
  <button
    type="button"
    class="re-button"
    id="rt-default"
    data-demo-toast="Saved."
    data-demo-toast-target="toaster"
  >
    Default
  </button>
  <button
    type="button"
    class="re-button"
    data-variant="secondary"
    id="rt-success"
    data-demo-toast="Upload complete."
    data-demo-toast-tone="success"
    data-demo-toast-target="toaster"
  >
    Success
  </button>
  <button
    type="button"
    class="re-button"
    data-variant="danger"
    id="rt-danger"
    data-demo-toast="Network error."
    data-demo-toast-tone="danger"
    data-demo-toast-target="toaster"
  >
    Danger
  </button>
</div>
<re-toast id="toaster"></re-toast>

Accessibility

• Keyboard — Toasts never steal focus, so there is no trap and nothing to return to. Each toast carries a native dismiss <button> reachable with Tab and activated with Enter/Space.
• Focus — The dismiss button shows a visible :focus-visible ring (--re-shadow-focus).
• Semantics — On connection <re-toast> becomes the role="region" live region, labelled aria-label="Notifications" (override by setting aria-label on the element). Its inner list is aria-live="polite" with aria-relevant="additions", so screen readers announce each new toast as it is appended; set data-live="assertive" on the element to interrupt instead. Individual toasts are role="status", except the danger tone, which is role="alert". The dismiss button is labelled aria-label="Dismiss notification".
• Notes — Tone is conveyed by both the live-region role and tinted surface/border (not colour alone), and --re-shadow-focus plus the tone borders keep the toast operable under forced-colors / High Contrast Mode. See the accessibility guide for the system-wide stance. The same region and roles back the functional showToast() API.