Button

کامپوننت Button برای اجرای یک عملیات با یک کلیک استفاده می‌شود؛ مثل ارسال فرم، باز کردن یک مودال یا تأیید یک عملیات. این کامپوننت بر پایه‌ی تگ استاندارد <button> ساخته شده، پس تمام ویژگی‌های بومی HTML (مثل onClick, disabled, type و ...) را هم می‌پذیرد.

Import

import { Button } from "fara-ui";

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

Basic Usage

<Button>ثبت‌نام</Button>

Playground

مقادیر زیر را تغییر بده تا خروجی و کد متناظرش را به‌صورت زنده ببینی:

variantprimarysecondarydangersuccessoutlineghost

sizesmmdlg

disabled

text

<Button variant="primary" size="md">
  ثبت‌نام
</Button>

Variant

• primary: دکمه‌ی اصلی صفحه، برای مهم‌ترین عملیات (مثل «ذخیره» یا «ارسال»).
• secondary: دکمه‌ی کم‌رنگ‌تر، برای عملیات ثانویه یا کنار دکمه‌ی primary (مثل «انصراف»).
• danger: دکمه‌ی قرمز، برای عملیات‌های مخرب (مثل «حذف»).
• success: دکمه‌ی سبز، برای تأیید یا تکمیل موفق یک عملیات.
• outline: دکمه‌ی با حاشیه‌ی رنگی و پس‌زمینه‌ی شفاف، جایگزین کم‌وزن‌تر برای primary.
• ghost: دکمه‌ی بدون حاشیه و پس‌زمینه، برای عملیات‌های کم‌اهمیت در فضای شلوغ (مثل نوار ابزار).

Size

سه اندازه‌ی sm، md (پیش‌فرض) و lg در دسترس است. اندازه‌ی دکمه را متناسب با اهمیت آن در رابط کاربری انتخاب کن.

Accessibility

• از تگ بومی <button> استفاده می‌کند، پس به‌صورت پیش‌فرض با صفحه‌کلید (Tab, Enter, Space) قابل استفاده است.
• برای دکمه‌های فقط-آیکون، حتماً aria-label مناسب اضافه کن تا برای کاربران screen reader قابل‌فهم باشد.

Data Attributes and Customize CSS

برای سفارشی‌سازی ظاهری، به‌جای وابستگی به کلاس‌های داخلی CSS، از attributeهای پایدار data-fara-* استفاده کن.

هر Button این attributeها را تولید می‌کند:

<button data-fara-button data-variant="primary" data-size="md">ذخیره</button>

Attribute	مقدارهای ممکن	کاربرد
data-fara-button	بدون مقدار	شناسایی عنصر اصلی Button
data-variant	primary, secondary, danger, success, outline, ghost	نوع ظاهری دکمه
data-size	sm, md, lg	اندازه‌ی دکمه

مثال تغییر ظاهر همه‌ی دکمه‌های خطرناک:

[data-fara-button][data-variant="danger"] {
  border-radius: 999px;
  font-weight: 700;
}

مثال تغییر ظاهر دکمه‌های بزرگ:

[data-fara-button][data-size="lg"] {
  min-width: 180px;
}

می‌توانی چند attribute را هم‌زمان هدف بگیری:

[data-fara-button][data-variant="outline"][data-size="sm"] {
  border-width: 2px;
}

کلاس‌هایی مانند .button, .primary و .md جزئیات داخلی CSS Modules هستند؛ برای overrideهای پایدار، به آن‌ها وابسته نشو.

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "danger" | "success" | "outline" | "ghost"	"primary"	ظاهر بصری دکمه
size	"sm" | "md" | "lg"	"md"	اندازه‌ی دکمه
disabled	boolean	false	غیرفعال کردن دکمه
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی
ref	Ref<HTMLButtonElement>	-	دسترسی مستقیم به المان DOM دکمه

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