Sonner (Toast)

Toast notification system powered by Sonner. Drop-in replacement for traditional toasts with brutalist styling.

Import

import { Toaster } from "poyraz-ui/molecules";
import { toast } from "sonner";

// Place <Toaster /> once in your layout
// Then call toast() anywhere in your app

Default Toast

A simple text toast notification.

import { toast } from "sonner";

<Button onClick={() => toast("Event has been created")}>
  Show Toast
</Button>

With Description

Toast with title and description.

toast("Event created", {
  description: "Monday, January 3rd at 6:00pm",
});

Variants

Success, error, warning, and info toast types.

toast.success("Profile saved successfully!");
toast.error("Something went wrong.");
toast.warning("Your session is about to expire.");
toast.info("A new update is available.");

With Action

Toast with an action button.

toast("File deleted", {
  description: "report-2024.pdf was removed.",
  action: {
    label: "Undo",
    onClick: () => console.log("Undo"),
  },
});

Promise

Toast that resolves with a promise.

toast.promise(
  new Promise((resolve) => setTimeout(resolve, 2000)),
  {
    loading: "Loading...",
    success: "Data loaded!",
    error: "Failed to load data.",
  },
);