دکمه آیکونی
وضعیت
هدفِ normative. پذیرش واقعی در وضعیت پذیرش طراحی؛ کلاس
.icon-btn فقط در پروتوتایپها تعریف شده است (prototype-only).
هدف
اکشنی که آیکونش خودگویاست: بستن، بیشتر (⋯)، تغییر نمای تقویم. دایرهای، دو
اندازه، همیشه با aria-label. جایی که معنی آیکون قطعی نیست، دکمهٔ متنی.
ساختار
<button class="icon-btn" aria-label="بستن">
<svg viewBox="0 0 24 24" width="20" height="20" …></svg>
</button>
SVG درونخطی، width/height صریح، currentColor برای رنگ.
گونهها و اندازهها
| اندازه | دکمه | آیکون |
|---|---|---|
| پیشفرض | ۴۰px | 20px |
| کوچک | ۳۰px | 16px |
گونهٔ رنگی جدا ندارد — همیشه شفاف؛ حالت فعال/انتخابشده با پسزمینهٔ ظرف اعلام میشود.
حالتها
| حالت | ظاهر |
|---|---|
| default | شفاف روی سطح |
| hover | پسزمینهٔ --surface-2 + آیکون به رنگ اصلی |
| focus-visible | حلقهٔ ۲px برند |
| active | مقیاس ۰٫۹۶ |
| disabled | کمرنگ؛ کلیک بیاثر |
| loading / error / success | ندارد (نپذیرفتن) — نتیجهٔ عمل با توست اعلام میشود |
رفتار
- کلیک = اکشن آنی؛ بدون تأخیر و بدون تأیید.
- در نوارهای شلوغ، اکشنهای فرعی در منوی
⋯جمع میشوند (الگوی منوی پاپآور).
کیبورد و دسترسپذیری
aria-labelفارسی همیشه — محتوای متنی ندارد.Enter/Spaceفعال میکند؛ ترتیب فوکوس = ترتیب بصری (در RTL از راست).- اندازهٔ کوچک ۳۰px فقط برای متادیتای فشرده؛ هدف لمسی با padding اطراف به ۴۴px گسترش مییابد.
رفتار واکنشگرا
در همهٔ کلاسها یکسان؛ اکشنهای ثانویهٔ هدر وب روی موبایل در منوی overflow
جمع میشوند (رفتار CalendarHeader).
قواعد محتوا
- ✅ فقط برای آی کونهای خودگویا و همهجا-شناخته.
- ❌ آیکون بدون
aria-label؛ دو آیکون متفاوت با یک label.
توکنها
--surface-2 (هاور) · --brand (آیکون هاور) · شعاع کامل · --ease ۱۵۰ms.
پیادهسازی پلتفرمها
- وب: کامپوننت اشتراکی ندارد؛ ad hoc با Tailwind +
aria-label— مرجع:CalendarHeader.tsxوFab.tsx. - اندروید:
component/IconButton.kt. .icon-btnفقط درui-design/prototypes/assets/app.css(prototype-only).