Badge

کامپوننت Badge برای نمایش وضعیت یا برچسب کوتاه استفاده می‌شود؛ مثل «فعال»، «پیش‌نویس» یا «تکمیل‌شده». برای برچسب‌هایی که کاربر می‌تواند حذف کند، از Chip استفاده کن.

Import

import { Badge } from "fara-ui";

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

Basic Usage

<Badge variant="success">فعال</Badge>

Playground

فعال

variantprimarysecondarysuccessdanger

children

<Badge variant="primary">فعال</Badge>

Variant

• primary (پیش‌فرض) — برچسب مهم با رنگ اصلی برند
• secondary — برچسب خنثی و کم‌رنگ
• success — وضعیت موفق یا تکمیل‌شده
• danger — وضعیت خطا یا بحرانی

<div>
  <Badge variant="success">پرداخت موفق</Badge>
  <Badge variant="secondary">پیش‌نویس</Badge>
  <Badge variant="danger">نیازمند بررسی</Badge>
</div>

Badge برای متن کوتاه و غیرتعاملی است. اگر کاربر باید آن را حذف کند یا روی آن action انجام دهد، از Chip یا یک دکمه‌ی واقعی استفاده کن؛ Badge خودش دکمه یا لینک تولید نمی‌کند.

Accessibility

• متن Badge باید وضعیت یا دسته‌بندی را به‌صورت واضح بیان کند.
• اگر رنگ به‌تنهایی معنای وضعیت را منتقل می‌کند، متن را هم صریح بنویس؛ مثلاً «موفق» یا «خطا»، نه فقط یک رنگ.
• چون خروجی یک <span> است، برای تعامل‌پذیر کردن آن از onClick به‌تنهایی استفاده نکن؛ عنصر مناسب مثل <button> یا <a> را داخل ساختار خودت قرار بده.

Data Attributes and Customize CSS

Badge روی ریشه‌ی خود این hookها را قرار می‌دهد:

Attribute	کاربرد
data-fara-badge	ریشه‌ی Badge
data-variant	variant فعلی: primary، secondary، success یا danger

<Badge className="order-status" variant="success">
  تکمیل‌شده
</Badge>

[data-fara-badge] {
  letter-spacing: 0;
}

[data-fara-badge][data-variant="success"] {
  border: 1px solid #86efac;
}

[data-fara-badge].order-status {
  min-width: 96px;
  justify-content: center;
}

className برای سفارشی‌سازی یک نمونه یا layout مناسب است و data-variant برای قوانین عمومی مبتنی بر نوع وضعیت.

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "success" | "danger"	"primary"	رنگ برچسب
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی
ref	Ref<HTMLSpanElement>	-	دسترسی مستقیم به المان DOM

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <span> (مثل onClick, aria-* و ...) نیز پشتیبانی می‌شوند.