Holo Toast & Holo Toast Region

<holo-toast-region> is a fixed-position, aria-live="polite" container typically placed once per page. It manages a stack of <holo-toast> children and exposes an addToast() method for creating them programmatically. Individual <holo-toast> elements support a manual close button and an auto-dismiss timer that pauses on hover/focus.

Live Previews

Toast variants

Changes saved.Upload complete.Storage almost full.Failed to save changes.

<holo-toast variant="info">Changes saved.</holo-toast> <holo-toast variant="success">Upload complete.</holo-toast>

Toast region with addToast()

Add toast

<holo-toast-region position="bottom-end"></holo-toast-region>
<script>
  const region = document.querySelector('holo-toast-region');
  region.addToast({ message: 'Changes saved.', variant: 'success', duration: 4000 });
</script>

---

API Reference

holo-toast Properties

| Property | Attribute | Description | Type | Default | | ---------- | ---------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- | | variant | variant | The severity/style of the toast. | 'info' \| 'success' \| 'warning' \| 'danger' | 'info' | | duration | duration | Milliseconds before the toast auto-dismisses. Omit (or 0) to require manual dismissal. Pauses on hover/focus. | number | undefined |

holo-toast Events

| Event | Description | Type | | ------------- | ----------------------------------------------------------------------------- | ------------------- | | holoDismiss | Emitted when the toast is dismissed (manually or via the auto-dismiss timer). | CustomEvent<void> |

holo-toast-region Properties

| Property | Attribute | Description | Type | Default | | ---------- | ---------- | ----------------------------------------------------------------- | ------------------------------------------------------------ | -------------- | | position | position | Which corner/edge of the viewport the toast stack is anchored to. | 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' | 'bottom-end' |

holo-toast-region Methods

| Method | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | addToast(options) | Creates a holo-toast, appends it to the region, and removes it on dismiss. options: { message: string; variant?: 'info' \| 'success' \| 'warning' \| 'danger'; duration?: number }. Returns Promise<HTMLElement>. |