Toast — Playground

Toast is a service, not a rendered instance: click the trigger to call kuiToast().open() with the current values below. The toast itself renders in the shared region on document.body, outside this preview stage — that matches real usage. maxVisible is an app-wide default (defaults.toast), so it isn't a control here.

px
appearance
position
State
ts.ts
this.toast.open({
  title: "Saved",
  message: "Your changes have been saved.",
});
NameTypeDefaultDescription
titlestring-Required headline text passed to open().
messagestring | undefined-Optional supporting text below the title.
appearance'neutral' | 'success' | 'warning' | 'danger' | 'info''neutral'Visual intent. Controls the accent bar and icon color; neutral renders no icon.
actionLabelstring | undefined-Label for the inline action button. Clicking it emits once on KuiToastRef.action$.
durationnumber5000Auto-dismiss delay in ms. Ignored when persistent is true. App-wide default overridable via defaults.toast.
persistentboolean | Signal<boolean>falseKeeps the toast open until it is closed explicitly. A signal can start or pause the auto-dismiss timer reactively.
closablebooleantrueShows the close button. App-wide default overridable via defaults.toast.
showIconbooleantrueShows the appearance icon. App-wide default overridable via defaults.toast.
showProgressbooleanfalseShows a progress bar tracking time until auto-dismiss. App-wide default overridable via defaults.toast.
kuiToast()() => KuiToast-Inject-function returning a reusable opener bound to the current injector scope. Call once per component; prefer over injecting KuiToast directly.
KuiToast.open(config)(config: KuiToastConfig) => KuiToastRef-Shows a toast notification and returns a ref for programmatic control.
KuiToast.setPosition(position)(position: KuiToastPosition) => void-Changes the shared toast region position at runtime. Intended for interactive demos; prefer defaults.toast for app-level configuration.
KuiToastRef.close()() => void-Closes this toast programmatically and plays the exit animation.
KuiToastRef.idnumber-Stable identifier for this toast within its owning toast service.
KuiToastRef.update(config)(config: Partial<KuiToastConfig>) => void-Updates this toast in place and re-evaluates its auto-dismiss timer.
KuiToastRef.closed$Observable<void>-Emits once after the close animation finishes, then completes.
KuiToastRef.action$Observable<void>-Emits once when the action button is clicked, then completes.
KuiToast.dismiss(id)(id: number) => void-Dismisses one toast created by this service using its stable reference id.
KuiToast.dismissAll()() => void-Dismisses all active toasts created by this service.
provideKuiDefaults({ toast })(defaults: KuiComponentDefaults) => Provider-App or route-level provider for toast defaults: position, duration, maxVisible, showProgress, closable, showIcon and closeIcon.
position'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''bottom-center'Global region position. Set app-wide via defaults.toast, or at runtime via KuiToast.setPosition for demos.
maxVisiblenumber3Max simultaneous toasts, set via defaults.toast. The oldest visible toast is evicted when exceeded. It follows runtime changes of the default.
KuiToastOptionsinterface-Shape of defaults.toast: position, duration, maxVisible, showProgress, closable, showIcon and closeIcon.

API verified against @kikita-labs/ui v2.0.0 public typings.