Toaster

Toaster wraps the sonner library with Downcity's theme-aware icons and styling. It provides consistent notification icons for success, info, warning, error, and loading states.

Import

import { Toaster } from "@downcity/ui";
import "@downcity/ui/styles.css";

Usage

Place <Toaster /> once at the app root. It renders a toast container that can be triggered from anywhere in the component tree.

function Layout({ children }) {
  return (
    <>
      <Toaster />
      {children}
    </>
  );
}

Trigger toasts using the sonner toast API:

import { toast } from "sonner";

toast.success("Agent started");
toast.error("Session timeout");
toast.info("Processing...");
toast.warning("Low credits");
toast.loading("Thinking...");

Props

All standard sonner ToasterProps are supported, including: