Toast
Stacked toast notifications. Unlike the other components this is imperative and group-managed, so it does not extend ZagController. Put the controller on the toast region and provide a <template> for one toast; stimulus-zag renders one per toast in the store.
Create toasts by calling the controller (via a Stimulus outlet) or by dispatching a zag-toast:create CustomEvent on the region element:
js
const region = document.querySelector('[data-controller~="zag-toast"]')
region.dispatchEvent(new CustomEvent("zag-toast:create", { detail: { title: "Saved!" } }))Parts
root, title, description, close-trigger, action-trigger (rendered per toast from the template).
Target: toastTemplate.
Values
| Attribute | Type | Default | Description |
|---|---|---|---|
data-zag-toast-placement-value | String | "bottom-end" | Where toasts appear. |
data-zag-toast-duration-value | Number | 5000 | Default auto-dismiss (ms). |
data-zag-toast-max-value | Number | 24 | Max visible toasts. |
data-zag-toast-gap-value | Number | 16 | Gap between toasts (px). |
data-zag-toast-overlap-value | Boolean | false | Overlap stacked toasts. |
Imperative API: create(options), success(options), error(options), info(options), warning(options) (each returns the toast id), dismiss(id?), and count. Options: { title, description, type, duration, id }.