دکمه آیکونی — IconButton

دکمهٔ فقط‌آیکون است و برای کنش‌هایی به کار می‌رود که آیکونشان آشنا است، مثل ویرایش، بستن یا اشتراک‌گذاری. پراپ الزامی است و به‌عنوان نام دسترسی () به صفحه‌خوان می‌رسد؛ آیکون خودش تزئینی است. برای آیکون مبهم یا کنشی که متن لازم دارد، از Button استفاده کنید. ساختار، برچسب دسترسی و رفتار کیبورد ثابت‌اند.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { IconButton } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

واریانت‌ها و اندازه‌ها

TSX

import { IconButton } from '@tokapps/tuk';import { Icon } from '@tokapps/icons';export function Toolbar() {  return (    <div>      <IconButton icon={<Icon name="add" size="sm" />} label="افزودن" variant="primary" />      <IconButton icon={<Icon name="edit" size="sm" />} label="ویرایش" variant="secondary" />      <IconButton icon={<Icon name="share" size="sm" />} label="اشتراک‌گذاری" />      <IconButton icon={<Icon name="close" size="md" />} label="بستن" size="lg" />    </div>  );}

آیکون جهت‌دار در RTL

TSX

import { IconButton } from '@tokapps/tuk';import { Icon } from '@tokapps/icons';export function BackButton({ onBack }: { onBack: () => void }) {  return (    <IconButton      icon={<Icon name="back" size="sm" mirror />}      label="بازگشت"      onClick={onBack}    />  );}

حالت در حال انجام و غیرفعال

TSX

import { IconButton } from '@tokapps/tuk';import { Icon } from '@tokapps/icons';type Props = { uploading: boolean; canDelete: boolean; onDelete: () => void };export function FileActions({ uploading, canDelete, onDelete }: Props) {  return (    <>      <IconButton icon={<Icon name="upload" size="sm" />} label="بارگذاری" loading={uploading} />      <IconButton icon={<Icon name="delete" size="sm" />} label="حذف" disabled={!canDelete} onClick={onDelete} sound={false} />    </>  );}

همهٔ پیکربندی‌ها

نوع	پیش‌فرض	توضیح
	— (الزامی)	آیکون، معمولاً .
	— (الزامی)	نام دسترسی؛ به‌عنوان می‌رسد.
· ·		پس‌زمینهٔ کنش دارد، پس‌زمینهٔ سطح و بی‌پس‌زمینه.
· ·		اندازهٔ مربع از .
		آیکون چرخان، و کلیک نادیده گرفته می‌شود.
رویداد ·		رویداد صوتی هنگام کلیک. یعنی این نمونه بی‌صداست.
	—	مقصد اختصاصی صدا برای همین نمونه.
·		دکمه‌های فقط‌آیکون پیش‌فرض در چاپ پنهان‌اند.
	—	ویژگی بومی ؛ همراه با تنظیم می‌شود.
	—	وقتی دکمه غیرفعال یا در حال انجام است اجرا نمی‌شود. با کردن، صدا هم پخش نمی‌شود.
· ·		پیش‌فرض در کد است.
	—	کلاس روی ریشه، برای چیدمان.

به‌علاوه همهٔ ویژگی‌های از (به‌جز ). پراپ برای این کامپوننت وجود ندارد؛ کنش ناهمگام را در مدیریت کنید و را خودتان تنظیم کنید.

ساختار و اسلات‌ها

code

button[data-tds="icon-button"][data-variant][data-size][data-print]  [data-loading]? [aria-label=label] [aria-busy]? [aria-disabled]?  └─ آیکون یا چرخنده (وقتی loading است، فقط چرخنده)

عنصر ریشه همان بومی است و برچسب فقط در است، نه متن مرئی.
صفت‌های ، ، ، و بنیان ثابت‌اند.
هیچ ندارد. فقط آیکون قابل‌تغییر است.

همهٔ حالت‌ها

حالت	نشانه	نمایش
پیش‌فرض	واریانت و اندازه	پس‌زمینهٔ واریانت؛ بی‌پس‌زمینه
hover		: ؛ : ؛ :
pressed		مقیاس ؛ پس‌زمینهٔ می‌گیرد. صفت در CSS استایل ندارد
focus-visible		حلقهٔ فوکوس با
loading	پراپ ؛ ، ،	آیکون چرخان؛ ؛ کلیک نادیده. در CSS فعلی با کدر هم می‌شود
disabled	صفت ؛	کدری ؛
print		در پنهان

تغییرات مجاز برای توسعه‌دهنده

واریانت: ، ، (پیش‌فرض).
اندازه: ، (پیش‌فرض)، .
آیکون: هر ، معمولاً با نام معنایی؛ برای آیکون جهت‌دار بدهید.
وضعیت: و .
صدا: و ؛ پیش‌فرض opt-in است.
چاپ: اگر دکمه باید روی کاغذ بماند.
نقاط توسعه: ، (متن دسترسی)، و ویژگی‌های مانند برای دکمهٔ دوحالته.
توکن در سطح کامپوننت: (اندازه‌ها، شعاع، زمان گذار، مقیاس فشردن، کدری غیرفعال) در .

تغییرات ممنوع (بنیان ثابت)

ساختار: یک بومی بدون متن مرئی. همیشه به می‌رسد.
حذف یا خالی گذاشتن آن. این پراپ الزامی است.
رنگ خام یا گرادیان در کد رابط.
رفتار حالت‌ها: کلیک در حالت غیرفعال یا در حال انجام اجرا نمی‌شود و و از وضعیت تنظیم می‌شوند.
حرکت در : چرخش حذف می‌شود و فقط نشانه می‌ماند.
هدف لمسی: حداقل ۲۴px و توصیهٔ ۴۴px را ذکر می‌کند، ولی قاعدهٔ کلی سیستم هدف لمسی ۴۴px است. در موبایل یا بدهید.

RTL، کیبورد و صفحه‌خوان

RTL: آیکون‌های جهت‌دار با برمی‌گردند. اندازه و موقعیت دکمه منطقی‌اند.
کیبورد: ورود و خروج؛ و فعال‌سازی. این رفتار از بومی می‌آید.
فوکوس: حلقهٔ فوکوس مرئی با ؛ کنتراست حداقل ۳:۱.
صفحه‌خوان: نام دکمه از خوانده می‌شود. آیکون تزئینی است. وضعیت با اعلام می‌شود.
دکمهٔ دوحالته: را مصرف‌کننده تنظیم می‌کند؛ کامپوننت آن را خودکار نمی‌دهد.

صدا، حرکت، چاپ و کاهش حرکت

صدا: پیش‌فرض و opt-in است. فقط هنگام کلیک پخش می‌شود و hover بی‌صداست. مقصد: یا مقصد سراسری. برای دکمه‌های احراز هویت و پرداخت توصیه می‌شود. معادل بصری: حالت و تغییر آیکون.
حرکت: فشردن با ()، تغییر پس‌زمینه با و چرخش با .
کاهش حرکت: چرخش ثابت می‌شود و فقط نشانهٔ می‌ماند.
چاپ: پیش‌فرض پنهان است. آن را روی کاغذ نگه می‌دارد.

توکن‌ها

معنایی: ، ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، .
کنترل: ، .
مسیر: مقدارها در ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون فقط با و نام معنایی داده می‌شود؛ مسیر فایل تصویری در کد نمی‌آید.
تم فقط حرکت و توکن را عوض می‌کند؛ ، ARIA و رفتار کیبورد ثابت‌اند.
gesture ندارد؛ معادل کیبوردی و است.

نکات

اگر کنش متن لازم دارد، از Button استفاده کنید.
برای یک کنش اصلی با گزینه‌های جانبی، از SplitButton استفاده کنید.
برای کنش‌های منوی زمینه‌ای، از ContextMenu استفاده کنید.