Toast

The per-item renderer used internally by <ToastContainer> for every visible toast. Exported separately for advanced cases — a fully custom container built on useToastState(), or overriding <ToastContainer>'s own #toast slot with <Toast> directly instead of your own markup.

<Toast :toast="item" :on-dismiss="(id) => queue.dismiss(id)" />

Props

toast

ToastItem

The reactive toast item to render (from queue.active, useToastState(), etc).

onDismiss

(id: string) => void

Called when the toast is dismissed — by the close button, swipe, Escape, or the timer expiring.

onGroupToggle

(groupKey: string) => void · default: —

Called when the group counter is clicked. Only relevant when toast.groupCount.value > 1.

Slots

toast-icon

Scope: { toast }

Replaces the icon. Defaults to ToastIcon.

toast-content

Scope: { toast }

Replaces the message + action area.

toast-action

Scope: { toast }

Replaces the action / undo buttons. Defaults to ToastActions.

toast-close

Scope: { toast, dismiss }

Replaces the close button.

toast-undo

Scope: { toast, remaining }

Replaces the progress bar at the bottom of the toast. Defaults to ToastProgressBar.

<ToastContainer> forwards its own same-named slots (#toast-icon, #toast-content, etc.) straight through to Toast — you rarely need to reach for Toast's slots directly unless you're rendering it outside <ToastContainer>.

Accessibility

Toast sets role="alert" for error/warning type or critical priority, role="status" otherwise; aria-live is "assertive" for critical priority (or whatever options.ariaLive overrides it to), "polite" otherwise; aria-atomic="true" always; tabindex="0" only when the toast is closable, has an action, or has an undo button (otherwise it's not keyboard-focusable at all); Escape dismisses the toast (only when closable) and returns focus to whatever element was focused before the toast appeared.

Default slot components

Three smaller components are exported alongside Toast — they're the default renderers for Toast's own named slots and have no independent meaning outside that context.

ToastIcon

{ type: ToastType, icon?: Component | string | false }

Renders icon if it's a component or emoji string; falls back to a built-in SVG per type when icon is unset; renders nothing when icon is false. aria-hidden="true" (decorative).

ToastProgressBar

{ remaining: number } — 0–1, the fraction of the timer remaining.

Renders the countdown bar at the bottom of a toast (scaleX(remaining)). aria-hidden="true" (decorative).

ToastActions

{ toast: ToastItem, onDismiss: (id: string) => void }

Renders the action button (toast.options.action) and/or the undo button (toast.options.undo), when either is set.