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 app-wide only (via provideKuiToastOptions) and has no runtime setter, 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 provideKuiToastOptions.
persistentbooleanfalseKeeps the toast open until the user closes it explicitly.
closablebooleantrueShows the close button. App-wide default overridable via provideKuiToastOptions.
showIconbooleantrueShows the appearance icon. App-wide default overridable via provideKuiToastOptions.
showProgressbooleanfalseShows a progress bar tracking time until auto-dismiss. App-wide default overridable via provideKuiToastOptions.
kuiToast()() => KuiToastService-Inject-function returning a reusable opener bound to the current injector scope. Call once per component; prefer over injecting KuiToastService directly.
KuiToastService.open(config)(config: KuiToastConfig) => KuiToastRef-Shows a toast notification and returns a ref for programmatic control.
KuiToastService.setPosition(position)(position: KuiToastPosition) => void-Changes the shared toast region position at runtime. Intended for interactive demos; prefer provideKuiToastOptions for app-level configuration.
KuiToastRef.close()() => void-Closes this toast programmatically and plays the exit animation.
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.
provideKuiToastOptions(options)(options: KuiToastOptions) => Provider-App or route-level provider for global toast defaults: position, duration, maxVisible, showProgress, closable, showIcon.
position'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''bottom-center'Global region position. Set app-wide via provideKuiToastOptions, or at runtime via KuiToastService.setPosition for demos.
maxVisiblenumber3Max simultaneous toasts, set via provideKuiToastOptions. The oldest visible toast is evicted when exceeded. Not changeable at runtime.

API verified against @kikita-labs/ui v1.6.1 public typings.