Toast

Usage

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

Toast is presentational and is intended to be passed to Sonner’s toast() API. title, description, and actions are required ReactNode values. onClose is currently part of the type but is not consumed by the implementation.

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

Sonner

Document

Installation

npm install sonner

Setup

import { Toaster } from "sonner";

<Toaster />;

Usage

import { toast } from "sonner";

toast("Event has been created.");