Button

کامپوننت x-button یک دکمه‌ی کاملاً منعطف و قابل شخصی‌سازی برای پروژه‌های Blade شماست. با این کامپوننت می‌توانید انواع دکمه‌های ساده، لینک، آیکن‌دار، دارای نشان (badge)، تاییدیه‌دار و ... را به راحتی بسازید و ظاهر و رفتار آن را مطابق نیاز خود تنظیم کنید. این دکمه هم برای اکشن‌های فرم و هم برای لینک‌های خارجی یا داخلی قابل استفاده است و امکانات متنوعی برای کنترل ظاهر، عملکرد و تعاملات کاربر در اختیار شما قرار می‌دهد.

---

ویژگی‌ها

• انتخاب رنگ (variant) از بین حالت‌های آماده مثل primary، success، danger، info و ... یا تعریف رنگ دلخواه
• تعیین ظاهر دکمه با پراپ appearance: حالت‌های solid (پررنگ)، light (روشن)، outline (حاشیه‌ای)، transparent (شفاف)
• پشتیبانی از انواع اندازه‌ها: خیلی کوچک (xs)، کوچک (sm)، متوسط (md)، بزرگ (lg)
• امکان افزودن آیکن (FontAwesome) در سمت چپ یا راست متن دکمه
• کنترل کامل گرد بودن گوشه‌ها: گرد کامل، گرد بالا، گرد پایین، دایره‌ای و ...
• قابلیت غیرفعال کردن دکمه و نمایش پیام راهنما (tooltip) برای حالت عادی یا غیرفعال
• پشتیبانی از دکمه‌های لینک (با پراپ href و target) یا دکمه‌های فرم (submit، reset، button)
• امکان نمایش نشان (badge) روی دکمه با موقعیت و ظاهر دلخواه
• پشتیبانی از تاییدیه (confirmation) قبل از اجرای اکشن (مثلاً برای حذف یا عملیات حساس)
• قابلیت اتصال به فرم خاص با پراپ formId
• امکان افزودن کلاس و استایل دلخواه و پراپ‌های اضافی
• پشتیبانی از پیام اعتبارسنجی فرم به صورت tooltip

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
variant	string	"primary"	رنگ اصلی دکمه (primary، success، danger، info و ...)
appearance	string	"solid"	ظاهر دکمه: solid، light، outline، transparent
title	string	null	متن دکمه
icon	string	null	کلاس آیکن FontAwesome برای نمایش کنار متن
iconPosition	string	"left"	موقعیت آیکن: left (پیش‌فرض) یا right
size	string	"md"	اندازه دکمه: xs، sm، md، lg
roundedPosition	string	"rounded"	نوع گرد بودن گوشه‌ها: rounded، rounded-top، rounded-end، rounded-bottom، rounded-start، rounded-circle، rounded-pill
disabled	boolean	false	غیرفعال کردن دکمه
disabledVariant	string	null	رنگ حالت disabled دکمه (primary، success، danger، info و ...)
tooltip	string	null	متن راهنما (tooltip) برای دکمه
disabledTooltip	string	null	متن راهنما برای حالت غیرفعال
type	string	"button"	نوع دکمه: button (دکمه معمولی) یا link (لینک)
buttonType	string	"button"	نوع دکمه فرم: submit، reset، button (فقط وقتی type=button)
href	string	null	اگر مقدار بدهید، دکمه به لینک تبدیل می‌شود (فقط وقتی type=link)
targetLink	string	"_self"	target لینک: _blank، _self، _parent، _top
formId	string	null	اتصال دکمه به فرم خاص
badgeValue	string	null	مقدار نشان (badge) روی دکمه
badgePosition	string	"top-left"	موقعیت نشان: top-left، top-right
badgeClass	string	null	کلاس CSS اضافی برای نشان
badgeSize	string	"sm"	اندازه نشان
badgeVariant	string	null	رنگ نشان (badge)
containerClass	string	null	کلاس CSS برای کانتینر دکمه
class	string	null	کلاس CSS اضافی برای خود دکمه
style	string	null	استایل درون‌خطی برای دکمه
extraAttributes	string	null	پراپ‌های اضافی برای دکمه
formValidationTooltipVisibility	boolean	true	نمایش پیام اعتبارسنجی فرم به صورت tooltip
formValidationTooltipMessage	string	null	پیام اعتبارسنجی فرم
confirmation	boolean	false	فعال‌سازی تاییدیه قبل از اکشن
confirmationMessage	string	"آیا از انجام این عملیات اطمینان دارید؟؟"	متن پیام تاییدیه
confirmationType	string	"info"	نوع تاییدیه (مثلاً info، danger و ...)
confirmationIcon	string	"fa-solid fa-question"	آیکن تاییدیه
confirmationConfirmCallback	string	null	تابع جاوااسکریپت برای اجرای بعد از تایید
confirmButtonText	string	null	متن دکمه تایید در تاییدیه
cancelButtonText	string	null	متن دکمه لغو در تاییدیه

نکات مهم

• اگر نوع دکمه button باشد، باید حداقل یکی از title یا icon مقدار داشته باشد.
• اگر نوع دکمه link باشد، مقدار href الزامی است و باید حداقل یکی از title یا icon را هم مقداردهی کنید.
• مقدار size فقط یکی از این مقادیر باشد: xs، sm، md، lg.
• مقدار roundedPosition فقط یکی از حالت‌های مجاز باشد (مثلاً rounded، rounded-circle و ...).
• مقدار iconPosition فقط left یا right باشد.
• مقدار badgePosition فقط top-left یا top-right باشد.
• مقدار targetLink فقط یکی از این مقادیر باشد: _blank، _self، _parent، _top.
• اگر نوع دکمه button باشد، پراپ href نباید مقدار داشته باشد.

---

مثال‌ها

نمونه ۱: دکمه

<x-button appearance="solid" variant="primary" title="لورم ایپسوم" size="md" />