NotificationBadge

کامپوننت NotificationBadge برای نمایش شمارنده‌ی اعلان روی یک عنصر استفاده می‌شود؛ مثل تعداد پیام‌های خوانده‌نشده روی آیکون زنگوله.

Import

import { NotificationBadge } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<NotificationBadge count={3}>
  <Button variant="secondary">اعلان‌ها</Button>
</NotificationBadge>

Playground

3

count

variantprimarydanger

showZero

<NotificationBadge count={3} variant="danger">
  <Button variant="secondary">اعلان‌ها</Button>
</NotificationBadge>

Variant

• danger — مناسب اعلان‌ها و موارد نیازمند توجه (قرمز)
• primary — شمارنده‌های خنثی با رنگ اصلی برند

Displaying Zero

به‌صورت پیش‌فرض وقتی count صفر یا undefined باشد نشانگر نمایش داده نمی‌شود. با showZero حالت صفر هم نمایش داده می‌شود — مثلاً برای صفحات سبد خرید که می‌خواهی همیشه وضعیت نمایش داده شود.

<NotificationBadge count={0} showZero variant="danger">
  <Button aria-label="اعلان‌ها">🔔</Button>
</NotificationBadge>

مقادیر منفی نیز مانند صفر بدون showZero نمایش داده نمی‌شوند؛ برای شمارنده از عدد غیرمنفی استفاده کن.

Accessibility

NotificationBadge خودش ارتباط معنایی اعلان با عنصر فرزند را ایجاد نمی‌کند. برای اینکه مقدار شمارنده برای screen reader قابل فهم باشد، روی فرزند یا wrapper مناسب aria-label، aria-describedby یا متن قابل دسترس قرار بده:

<NotificationBadge count={3} variant="danger">
  <Button aria-label="اعلان‌ها، ۳ مورد خوانده‌نشده">🔔</Button>
</NotificationBadge>

شمارنده فقط نمایشی است و عنصر تعاملی نیست؛ action باید روی children مثل Button یا لینک قرار بگیرد.

Data Attributes and Customize CSS

NotificationBadge hookهای زیر را تولید می‌کند:

Attribute	کاربرد
data-fara-notification-badge	wrapper اطراف children و شمارنده
data-fara-notification-badge-count	شمارنده؛ فقط وقتی قابل نمایش باشد
data-variant	variant شمارنده: primary یا danger

[data-fara-notification-badge] {
  margin-inline: 8px;
}

[data-fara-notification-badge-count][data-variant="danger"] {
  min-width: 24px;
  background: #dc2626;
}

در API فعلی برای wrapper یا count prop className وجود ندارد؛ برای سفارشی‌سازی از selectorهای data-* استفاده کن.

Props

Prop	Type	Default	Description
children	ReactNode	-	عنصری که نشانگر روی آن قرار می‌گیرد (الزامی)
count	number	-	تعداد اعلان‌ها
variant	"primary" | "danger"	"primary"	رنگ نشانگر
showZero	boolean	false	نمایش نشانگر وقتی count صفر است