Toast

Usage

import { Toaster, toast } from "@kanzo-tech/ui";

// Once, near the root of the app.
<Toaster />;

// Anywhere.
toast.create({
  title: "Contract claimed",
  description: "Q-1041 · Something is eating the bell-ropes",
  type: "success",
});

toast is a module-level toaster instance, not a hook — which is what makes it callable from an event handler, a mutation callback or a plain function with no React context in scope. Render <Toaster /> exactly once; every toast.create in the app feeds that one viewport.

Anatomy

Toaster            (portal + viewport)
└── ToastItem      (rendered per toast, not written by hand)
    ├── icon       (derived from `type`)
    ├── title
    ├── description
    ├── action     (from `action: { label, onClick }`)
    └── close

ToastItem is exported so a custom Toaster can reuse it, but the default Toaster already renders it for each toast — a page only ever calls toast.create.

Types

The type picks the icon and its colour from the status tokens. loading renders a Spinner and does not auto-dismiss, so pair it with toast.update or toast.dismiss when the work finishes.

With an action

API Reference

Toaster

Pass your own createToaster() instance to run a second, separately-placed viewport. Otherwise the shared one is used. Extends ArkToaster props minus toaster and children.

The default instance is { placement: "bottom-end", overlap: true, max: 3 } — stacked rather than listed, capped at three so a burst of notifications cannot cover the page.

toast.create