دکمه
وضعیت
هدفِ normative — سلسلهمراتب اکشن با گونه، نه با رنگ اضافه. وضعیت پذیرشِ واقعی
وب/اندروید در وضعیت پذیرش طراحی ثبت شده؛ کلاسهای
.btn* فقط در پروتوتایپها تعریف شدهاند (prototype-only).
هدف
پرکاربردترین کامپوننت سیستم: اجرای اکشن. در هر نما حداکثر یک دکمهٔ primary؛ سلسلهمراتب با گونه ساخته میشود، نه با اندازه یا رنگ اضافه.
ساختار
<button class="btn primary"><span class="spinner"></span>ذخیره رویداد</button>
آیکون اختیاری ۱۷px قبل از متن؛ متن فعل کوتاه. spinner جای متن را میگیرد و عرض ثابت میماند.
گونهها و اندازهها
| گونه | کلاس | چه زمانی |
|---|---|---|
| اصلی | .btn.primary | اکشن اصلی هر نما — فقط یکی در هر نما |
| تنال | .btn.tonal | اکشن دوم در کنار اصلی (مثل «افزودن» در سایدبار) |
| خطی | .btn.outline | انصراف، بستن، اکشنهای خنثی دیالوگ |
| متنی | .btn.text | لینکهای درونمتنی و اکشنهای کماهمیت |
| مخرب | .btn.danger-text | فقط حذف — همیشه تنها و در سمت مخالف اکشن اصلی |
| متنی درونخطی | .linkish | اکشن کماهمیت داخل متن یا پانویس فرم («بازگشت»، «ارسال مجدد») — رنگ لینک، هاور با پسزمینهٔ ظریف، غیرفعال مجاز |
اندازهها: پیشفرض ۴۰px · کوچک .sm ۳۲px.
حالتها
| حالت | ظاهر |
|---|---|
| default | پر (primary) با --on-brand؛ بقیهٔ گونهها شفاف/خطی |
| hover | روشنشدن سطح (--surface-1) + سایه ۱ برای primary |
| focus-visible | حلقهٔ ۲px برند؛ هرگز حذف outline |
| active | فشردن: translateY(1px) در ۸۰–۱۲۰ms |
| disabled | کاهش کنتراست، بدون cursor؛ در فرم تا اعتبارسنجی کامل |
| loading | متن → اسپینر؛ دکمه قفل میماند و عرض ثابت |
| error | دکمهٔ خودش قرمز نمیشود؛ خطا با بنر/متن فرم اعلام میشود (نپذیرفتن) |
| success | دکمهٔ موفق جدا ندارد؛ نتیجه با توست/--ok اعلام میشود (نپذیرفتن) |
رفتار
- بعد از ارسال فرم، متن با اسپینر عوض میشود و دکمه تا پایان عمل قفل میماند (دوبار-cling ممنوع).
- کلیک/لمس روی دکمهٔ disabled کاری نمی کند و tooltip هم ندارد.
کیبورد و دسترسپذیری
Enter/Spaceفعال میکند (رفتار بومی<button>).- نامِ دسترسپذیر = متن دکمه؛ دکمهٔ فقطآیکونی ممنوع (برای آن دکمهٔ آیکونی).
- هدف لمسی ≥ ۴۴px (اندازهٔ پیشفرض ۴۰ + فاصلهٔ مجاور کافی؛ در لمس، hit area با padding گسترش مییابد).
aria-busyهنگام بارگذاری روی دکمهٔ متصلبهعمل طولانی توصیه میشود.
رفتار واکنشگرا
در همهٔ کلاسهای پنجره یکسان است؛ فقط جایگاه عوض میشود (ایجاد در سایدبار
expanded، در ریل/FAB در کلاسهای کوچکتر). اندازهٔ sm برای نوارهای فشردهٔ
موبایل.
قواعد محتوا
- ✅ فعل مثبت کوتاه: «ذخیره»، «ایجاد رویداد»، «ارسال کد».
- ✅ در فرم دیالوگ: اصلی برای تأیید، خطی برای انصراف، مخرب تنها برای حذف.
- ❌ دو دکمهٔ primary در یک نما یا گروه کنار هم.
- ❌ فعل منفی یا مبهم: «عدم ذخیره»، «تأیید نهایی نهایی».
توکنها
رنگ از --brand/--on-brand (گونههای پر) و --surface-1..3 (هاور گونههای
شفاف)؛ شعاع --r-md؛ حرکت --ease با ۸۰–۱۲۰ms (active) و ۱۵۰ms (رنگ).
پیادهسازی پلتفرمها
- وب: کامپوننتِ اشتراکیای به نام Button وجود ندارد؛ دکمهها ad hoc با
Tailwind نوشته میشوند — نقطهٔ مرجع: هدر و مودالهای
EventModal.tsx. - اندروید: پوشش Compose موجود —
component/Button.kt. - کلاسهای
.btn*/.linkishفقط درui-design/prototypes/assets/app.cssتعریف شدهاند (prototype-only؛ توکن production نیستند).