یه دکمه‌ی سطل که با کلیک باز می‌شه و کنارش دو گزینه‌ی «تأیید» و «انصراف» بیرون می‌آد؛ درِ سطل تا می‌خوره و بعد از حذف، تیک می‌نشینه.

وابستگی‌ها

نوع تعامل

روی سطل بزن: بدنه‌اش کوتاه می‌شه، درش بالا می‌پره و پنلِ کنارش با یک تاخیرِ پله‌ای باز می‌شه. زدنِ تیک کار رو تأیید می‌کنه (ایکنِ سطل جاش رو به یه تیک می‌ده و چند لحظه می‌مونه)، ضربدر لغوش می‌کنه (سطل یه تکانِ ریزِ «نه» می‌خوره) و Escape هم همون لغو رو می‌زنه. کلیکِ دوباره روی خودِ سطل یا Escape هر دو پنل رو می‌بندن و تمرکز به سطل برمی‌گرده.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import { DeleteButton } from "@/components/farsify/delete-button";

export function ReportRow({ id }: { id: string }) {
  return (
    <div className="flex items-center gap-3">
      <span className="min-w-0 truncate text-sm">گزارشِ ماهانه</span>
      <DeleteButton
        onConfirm={() => remove(id)}
        onCancel={() => console.log("لغو شد")}
      />
    </div>
  );
}

// رنگِ تأیید را عوض کن (هر مقدارِ CSS قبول است)
<DeleteButton accent="#e11d48" onConfirm={remove} />

// وقتی حذف مجاز نیست
<DeleteButton disabled />

نکته‌ها

• این دکمه برای کنشِ برگشت‌ناپذیر امن‌تر از یه دکمه‌ی تک‌مرحله‌ایه: کلیکِ اول فقط پنل رو باز می‌کنه و تصمیم با کلیکِ دوم گرفته می‌شه.
• `onConfirm` رو فقط ثبتِ داده بذار؛ انیمیشنِ بستن و برگشتِ دکمه خودش انجام می‌شه و معطلِ شما نمی‌مونه.
• بیرون‌کلیک عمداً پنل رو نمی‌بنده — تا کلیکِ ناخواسته تصمیمِ کاربر رو عوض نکنه. اگه این رفتار رو می‌خوای، خودت با یه `onClick` روی والد مدیریتش کن.
• پنل همیشه در سمتِ `start` باز می‌شه — در فارسی یعنی **راستِ دکمه** — و دکمه در `end` می‌مونه؛ زبانه‌ی پنل و لولای درِ سطل هم با همان جهت هم‌سو می‌شن. هیچ‌کدوم رو دستی جابه‌جا نکن.
• با `prefers-reduced-motion` همه‌ی حرکت‌ها صفر می‌شن ولی منطقِ باز/بسته و زمان‌بندیِ حالتِ پایانی سرِ جاش می‌مونه.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.