Toast

Setup

Mount a single <Toaster /> once at your app root (e.g. the root layout), then push toasts from anywhere by importing toast. The store lives outside any page, so calls work from components, load functions, event handlers, etc.

import { toast, Toaster } from "svelte-ui";

<!-- +layout.svelte (once) -->
<Toaster />

// anywhere
toast.success("Saved successfully");

Variants

Five status variants. Click to fire one (auto-dismisses after 4s by default).

import { toast, Toaster } from "svelte-ui";

toast.success("Saved successfully");
toast.info("Heads up — sync started");
toast.warning("Storage almost full");
toast.danger("Something went wrong");
toast.show("primary", "A neutral note");

Options — `timeout` + `size`

timeout is the auto-dismiss delay in ms (0 = sticky, dismiss with the × button); size takes the shared sm/md/lg axis.

import { toast, Toaster } from "svelte-ui";

toast.info("Sticky — dismiss with the × button", { timeout: 0 });
toast.success("Gone in a second", { timeout: 1000 });
toast.info("A larger toast", { size: "lg" });

// toast.show(...) / toast.<variant>(...) return an id you can dismiss:
const id = toast.info("Working…", { timeout: 0 });
toast.dismiss(id);

Toast

Setup

Variants

Options — timeout + size

Options — `timeout` + `size`