تم تاریک
دکمه Button
دکمه‌ها عناصر قابل کلیکی هستند که برای ایجاد ارتباط بین اقدام کاربر و نتیجه استفاده می‌شوند. متن یا آیکون دکمه باید به صورت شفاف نشان دهد با کلیک چه اتفاقی می‌افتد.
از دکمه‌ها برای عملیات اصلی و ثانویه استفاده می‌شود. هر صفحه باید فقط یک اقدام اصلی واضح (CTA) داشته باشد و سایر اقدامات با تاکید پایین‌تر نمایش داده شوند.
نمونه زنده
انواع
| Variant | کاربرد |
|---|---|
upgrade | فقط برای دعوت به ارتقای پلن. |
primary | اقدام اصلی صفحه (CTA). |
secondary | اقدام ثانویه، معمولا کنار Primary. |
ghost | اقدام کم‌اهمیت، مثل «لغو». |
tertiary | اقدام کم‌تاکید که می‌تواند مستقل هم باشد. |
primary-danger / tertiary-danger / ghost-danger | اقدام‌های مخرب مثل حذف. |
آناتومی
برچسب متنی مهم‌ترین عنصر دکمه است و باید واضح، مستقیم و قابل فهم باشد. اگر متن نداریم، آیکون باید کاملا معنای اقدام را منتقل کند.
ساختار
متوسط
| موضوع | مقدار |
|---|---|
| ارتفاع کلی | 40px |
| سایز آیکون | 20px |
| فاصله داخلی | 8px |
| پدینگ افقی | 16px |
| پدینگ عمودی | 10px |
| شعاع | 12px |
کوچک
| موضوع | مقدار |
|---|---|
| ارتفاع کلی | 32px |
| سایز آیکون | 20px |
| فاصله داخلی | 8px |
| پدینگ افقی | 16px |
| پدینگ عمودی | 6px |
| شعاع | 8px |
نوار
ضخامت استروک دکمه‌ها 1px است و بسته به Variant می‌تواند وجود داشته باشد یا نداشته باشد.
اندازه
در گروه دکمه‌ها، عرض‌ها را تا حد امکان یکدست نگه دارید تا ریتم بصری حفظ شود. از ترکیب دکمه‌های با عرض نامتوازن در یک گروه مرتبط پرهیز کنید.
| Do | Don't |
|---|---|
 |  |
سلسله‌مراتب
تک‌اقدام اصلی
در هر صفحه معمولا یک دکمه با تاکید زیاد داشته باشید تا مسیر اصلی اقدام کاربر واضح باشد.
اقدام همزمان
اگر چند اقدام دارید، یک Primary را با Secondary/Tertiary/Ghost همراه کنید. از چند دکمه هم‌وزن با تاکید بالا کنار هم اجتناب کنید.
| Do | Don't |
|---|---|
 |  |
چیدمان
جایگذاری دکمه به context بستگی دارد:
- در صفحات کامل: اقدام اصلی معمولا در ناحیه‌ای قرار بگیرد که در کانون توجه کاربر است.
- در جریان‌های مرحله‌ای (wizard/dialog): اقدام اصلی معمولا در انتهای مسیر تصمیم (فوتر) قرار بگیرد.
- در اجزایی مثل جدول/نوار ابزار: گروه دکمه‌ها منسجم و قابل اسکن باشند.
نوشتار
- متن دکمه کوتاه، مستقیم و actionable باشد.
- برچسب ترجیحا کوتاه باشد (معمولا تا ۳ کلمه).
- از شکستن متن دکمه در چند خط پرهیز کنید.
- اگر متن ضروری نیست، از آیکون معنادار استفاده کنید.
| Do | Don't |
|---|---|
 |  |
آیکون
- آیکون نقش کمکی برای تقویت معنی اقدام دارد.
- سایز آیکون ثابت:
20px - رنگ آیکون باید با رنگ متن دکمه هماهنگ باشد.
- جایگاه آیکون در دکمه‌های متنی: قبل از متن (با رعایت RTL/LTR).
- دکمه Icon-only فقط در حالتی مجاز است که معنی اقدام واضح باشد.
| RTL | LTR |
|---|---|
 |  |