Overlays

Toast

The toast queue is a plain store with no framework in it, so the toaster is a module-level singleton. The three lines below are identical in React, Vue, Svelte and Angular — no provider, no inject, no DI token in any of them. React builds its queue with createToastQueue(); the other three still use createToaster() until they move across.

data-scope="toast"@zag-js/toast

What you get for free

A queue with overflow — v0 capped at 5 and dropped the rest
Pause on hover and on focus
Swipe to dismiss
alt+T to move focus into the group
Promise-tracking toasts and update-in-place

Usage

ReactVueSvelteAngular

// once, anywhere
export const toaster = createToastQueue();

// once, at the app root
<Toaster toaster={toaster} />

// anywhere — no hook, no context
toaster.success({ title: "Saved" });

export const toaster = createToaster();

<Toaster :toaster="toaster" />

toaster.success({ title: "Saved" });

export const toaster = createToaster();

<Toaster {toaster} />

toaster.success({ title: "Saved" });

export const toaster = createToaster();

<ck-toaster [toaster]="toaster" />

toaster.success({ title: "Saved" });

Props

Prop	Type	Default	Notes
`toaster`	ToastQueue	—	The queue from createToastQueue() in React, or createToaster() elsewhere.
`hideIcon`	boolean	`false`	Suppress type icons.
`createToastQueue(options)`	{ placement?, max?, duration?, removeDelay? }	—	Defaults to bottom-end, max 5, 5s, 200ms. React only for now.
`createToaster(options)`	{ placement?, max?, duration?, gap?, offsets? }	—	Vue, Svelte and Angular until they move across.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.

Migrating from react-ui-toolkit

v0	v1	Notes
`<NotificationProvider>`	`<Toaster :toaster> at the root`
`const { notify } = useNotification()`	`import { toaster } — no hook`
`notify({ type, message, description })`	`toaster.success({ title, description })`