Toast

Sonner

Document

Installation

npm install sonner

Setup

import { Toaster } from "sonner";

<Toaster />;

Usage

import { toast } from "sonner";

toast("Event has been created.");

Preview

import Toast from "@repo/ui/Toast";
import { Toaster, toast } from "sonner";

<Toaster closeButton />

<button
  onClick={() =>
    toast(
      <Toast
        title="به‌روزرسانی جدید"
        description="نسخه جدید آماده نصب است. برای بهبود عملکرد به‌روزرسانی کنید."
        actions={
          <div className="flex gap-4">
            <Button size="xs" color="gray" variant="outlined">
              مشاهده تغییرات
            </Button>

            <Button size="xs" color="gray" variant="outlined">
              به‌روزرسانی
            </Button>
          </div>
        }
      />,
    )
  }
>
  نمایش
</button>

Installation

npx the-dig@latest add Toast

Props

Prop	Type	Default
title *	ReactNode	-
description *	ReactNode	-
actions *	ReactNode	-
className	string	-
onClose	VoidFunction	-