Toast

toast("Settings saved");toast.success("Deployed", { description: "acme-api is live" });toast.error("Deploy failed", {description: "Build step exited with code 1.",timeout: 0,});await toast.promise(deploy(), {loading: "Deploying…",success: "Deployed",error: "Deploy failed",});

Mount <Toaster /> once, near the root. Everything after that is a plain function call from anywhere in the application — no hook, no context, no provider in your component tree, and nothing to thread through props.

Usage

import { Toaster, toast } from "@heyo-sh/heyo-ui";// once, near the root<Toaster />;// anywheretoast.success("Deployed", { description: "acme-api is live" });

Tones

toast("Settings saved");toast.success("Deployed");toast.error("Deploy failed");toast.warning("Quota almost reached");toast.info("A new version is available");

timeout: 0 keeps a toast up until it is closed — the right choice for an error the reader has to act on, and the wrong one for everything else.

Promises

toast.promise takes one toast through all three states and resolves to the promise's own value, so it drops into an existing call without restructuring it.

await toast.promise(deploy(), {  loading: "Deploying…",  success: "Deployed",  error: "Deploy failed",});

Updating and closing

Every call returns an id.

const id = toast("Uploading…", { timeout: 0 });toast.update(id, { title: "Uploaded", description: "3 files" });toast.close(id);toast.close(); // everything

Placement

The Toaster owns the corner, the stack limit and the default timeout. Bottom-right is the default because it is the furthest corner from where the work is happening.

<Toaster position="bottom-right" limit={3} timeout={5000} />

Properties

toast(title, options)

The toast namespace

Toaster