Toast notifications, delivered by Pip.

toast(input)

toast(input: string | ToastPayload): string

Shows a toast and returns its id. A string is treated as message. Empty payloads (no title, message, content, or action) are ignored and return "".

toast({
  title: "Sprint review",
  message: "Bring your notes.",
  position: "bottom-right",
  duration: 5000, // ms; 0 = sticky until ×
});

const id = toast("Queued.");
toast.dismiss(id);
toast.dismissAll();

ToastPayload

Shortcuts

toast.info · toast.success · toast.warning · toast.error

Same as toast({ …, status }). A string argument becomes the message.

toast.error({
  title: "Deploy failed",
  message: "The worker ran out of memory.",
  action: [
    { label: "Retry", onClick: () => {} },
    { label: "Details", variant: "ghost", dismiss: false },
  ],
});

toast.configure(options)

configure(options: { position?, duration?, zIndex?, card? }): void

Defaults for the singleton. Call before the first toast, or later to change dock, timing, stacking order, or card colors.

toast.configure({
  position: "top-right",
  duration: 4000,
  card: {
    background: "#111827",
    color: "#f9fafb",
    accent: "#e07a5f",
  },
});

accent is the default-status highlight. info / success / warning / error keep their own accent. Pip’s shirt still follows status; hat and skin stay as they are.

Custom content

Unstyled button / a inside content pick up the toast styles. Pass a factory so listeners survive the carry animation.

toast({
  title: "File deleted",
  content: (ctx) => {
    const undo = document.createElement("button");
    undo.textContent = "Undo";
    undo.addEventListener("click", () => ctx.dismiss());
    return undo;
  },
});

createToaster(options)

createToaster(options?: ToasterOptions): Toaster

Isolated instance. Use it for a second stack, a custom mount node (position: relative), or a localized close label. If target is omitted, the overlay is position: fixed on document.body.

import { createToaster } from "pip-toaster";

const notify = createToaster({
  position: "bottom-left",
  duration: 5000,
  target: document.querySelector("#app"),
  labels: { close: "Dismiss" },
});

notify("Hello");
notify.destroy();