Examples

Async Action Feedback

import { toast } from "nudge-ui";

async function uploadFile(file: File) {
  const id = toast.loading("Uploading…", { autoClose: false });
  try {
    await doUpload(file);
    toast.update(id, {
      type: "success",
      message: "File uploaded successfully!",
      autoClose: true,
      duration: 3000,
    });
  } catch (err) {
    toast.update(id, {
      type: "error",
      message: `Upload failed: ${err.message}`,
      autoClose: true,
      duration: 5000,
    });
  }
}

With Title

toast.error("Failed to save", {
  title: "Save Error",
  duration: 6000,
  position: "top-center",
});

HTML Content (with caution)

// ⚠️ Only use allowHtml with trusted/sanitized content
toast.info('<b>Update available</b> - <a href="/changelog">See what\'s new →</a>', {
  allowHtml: true,
  duration: 8000,
  autoClose: true,
});

Multi-position Stack

// Toasts in different positions coexist independently
toast.info("Top right info", { position: "top-right" });
toast.success("Bottom left success", { position: "bottom-left" });
toast.warning("Bottom center warning", { position: "bottom-center" });

Custom Component (React)

// Use toast as a notification with a custom onClose callback
toast.show("Your session expires in 5 min", {
  type: "warning",
  autoClose: false,
  onClose: (t) => {
    console.log("Toast dismissed:", t.id);
    refreshSession();
  },
});

Clear Toasts on Route Change (Next.js)

"use client";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { toast } from "nudge-ui";

export function RouteChangeCleaner() {
  const pathname = usePathname();
  useEffect(() => {
    toast.clearAll();
  }, [pathname]);
  return null;
}