Toast · notifications
A stack of notifications that slides in, fans out on hover, pauses while you read and can be swiped away — with kinds, actions, promises, in-place updates and six positions.
Kinds
Actions · promises · updates
The toaster
bottom-right
Tint each toast by its kind.
Hover the stack to fan it out and pause the timers · drag a toast sideways to throw it away.
Usage
import { toast, Toaster } from "./components/toast.js"; html`… ${Toaster({ position: "bottom-right", richColors: true })}` // once, in your .zap root toast("Event created", { description: "Friday at 10:00" })toast.success("Changes saved") // .info · .warning · .error · .loading · .message // a button — the toast closes after ittoast("Message archived", { action: { label: "Undo", onClick: restore } }) // one toast through a promise's life: loading → success / errortoast.promise(api.save(), { loading: "Saving…", success: (r) => r.name + " saved", error: (e) => "Failed: " + e.message,}) // update in place, keep until dismissedconst id = toast.loading("Uploading… 0%");toast.update(id, { title: "Uploading… 60%" });toast.update(id, { kind: "success", title: "Uploaded" });toast("Sticky", { duration: Infinity, closeButton: true });toast.dismiss(id); toast.dismiss(); // one, or all