دکمه‌ی اشتراک‌خبر که با روشن‌شدن زنگوله رو می‌تکونه، حلقه‌های موج می‌فرسته و متنش رو با محوِ متقابل عوض می‌کنه؛ بادکنکِ شمارشِ اعلان هم داره.

وابستگی‌ها

نوع تعامل

با کلیک یا `Space`/`Enter` وضعیت عوض می‌شه: زنگوله چند بار می‌لرزه، دو موجِ حلقه‌ای از هر طرف می‌دون و متنِ دکمه با محوِ متقابل و بازشدنِ تدریجی عوض می‌شه. دکمه به اندازه‌ی متنِ تازه پهن یا تنگ می‌شه و بادکنکِ شمارش فقط توی حالتِ روشن دیده می‌شه.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import { useState } from "react";
import { BellToggle } from "@/components/farsify/bell-toggle";

export function SubscribeBell() {
  const [on, setOn] = useState(false);

  return (
    <BellToggle
      pressed={on}
      onChange={setOn}
      offLabel="باخبرم کن"
      onLabel="باخبرت می‌کنم"
      count={3}
    />
  );
}

// زنگوله‌ی خطی، بدونِ موج، با شمارشِ بیشتر
<BellToggle clapper waves={false} count={12} onBackground="var(--color-brand)" />

// بدونِ بادکنک و با لرزشِ آرام‌تر — مناسبِ فهرستِ شلوغ
<BellToggle badge={false} ringAmplitude={8} ringPasses={2} size="sm" />

نکته‌ها

• iconِ اولین فرزندِ دکمه‌ست، پس توی `dir="rtl"` خودکار سمتِ راست می‌نشینه و متن سمتِ چپ — دقیقاً همون چیدمانِ خواسته‌شده، بدونِ `order`.
• بادکنک توی RTL به سمتِ متن (چپ) می‌ره، چون `inset-inline-end`ـه؛ اگه جاش رو دستی گذاشته باشی، توی فارسی به لبه‌ی icon می‌چسبه و روش می‌افته.
• `count` رو از منبعِ داده‌ی خودت بده (مثلاً شمارِ اعلانِ نخونده)؛ توی دموی سایت برای این‌که بادکنک روی حالتِ روشن دیده شه، اسلایدرِ دستی داره و مرجع هم تایمرِ خودکار داشت.
• `ringAmplitude` و `ringPasses` رو کم کن اگه دکمه توی فهرستِ شلوغ تکرار می‌شه؛ لرزشِ کاملِ پنج‌پاس توی نگاهِ اول جلبِ توجه می‌کنه ولی توی ده دکمه شلوغی می‌سازه.
• با `prefers-reduced-motion` لرزش و موج‌ها حذف می‌شن و محوِ متن کوتاه می‌شه؛ وضعیتِ روشن/خاموش از رنگ و متن خونده می‌شه.

مجوز

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