اندازه و چگالی

مقیاس پنج‌پله‌ای کنترل‌ها، پیش‌فرض پروژه، و تله‌ی size="default"

اصل

هر کنترلی که کاربر با آن کار می‌کند — دکمه، ورودی، انتخابگر — از یک مقیاس پنج‌پله‌ای مشترک اندازه می‌گیرد: xs · sm · md · lg · xl. یک مقیاس، نه یک عدد برای هر کامپوننت. به همین دلیل یک ردیف از دکمه و ورودی و انتخابگر با یک size مشترک، دقیقاً هم‌قد می‌شوند.

پیش‌فرض پروژه sm است. این یک انتخاب سنجیده است، نه پیش‌فرض تصادفی: نسخهٔ ۲.۰.۰ آن را به xs برده بود چون از تعریف مقیاس در Studio استنتاج شده بود، نه از چیزی که کد خودِ Studio واقعاً پیش‌فرض می‌گیرد. با اندازه‌گیری سورس واقعی به sm برگشت.

نمونه بصری

اندازه	دکمه	ورودی
xs	…	…
smپیش‌فرض	…	…
md	…	…
lg	…	…
xl	…	…

قدها از lib/constants.ts می‌آیند و عددِ کنار هر کنترل، ارتفاعِ اندازه‌گیری‌شده از خودِ DOM است — نه عددی که جدولی ادعا کند.

قوانین اجباری

`size="default"` پیش‌فرض نیست

تله‌ای که نامش گمراه‌کننده است

Button یک کلید size="default" دارد که به پیش‌تنظیم فشرده (xs، ۲۶ پیکسل) نگاشت می‌شود، نه به پیش‌فرض پروژه. اگر size را ندهید sm می‌گیرید (۳۴ پیکسل)؛ اگر صریحاً size="default" بنویسید، یک دکمهٔ کوچک‌تر می‌گیرید. این حالت برای سازگاری با کد قدیمی نگه داشته شده. سالم‌ترین کار: size را ننویسید، یا نامِ پله را صریح بدهید.

// ✅ پیش‌فرض پروژه (sm، ۳۴ پیکسل)
<Button>ذخیره</Button>
<Button size="sm">ذخیره</Button>

// ❌ به‌نظر می‌رسد «پیش‌فرض» است ولی xs می‌دهد (۲۶ پیکسل)
<Button size="default">ذخیره</Button>

همهٔ کنترل‌های یک ردیف، یک `size`

// ✅ هم‌قد
<div className="flex items-center gap-2">
  <Input size="sm" />
  <Button size="sm">جستجو</Button>
</div>

// ❌ دو قد متفاوت در یک ردیف
<div className="flex items-center gap-2">
  <Input size="sm" />
  <Button size="md">جستجو</Button>
</div>

عدد دستی ننویسید

ارتفاع و padding از مقیاس می‌آیند. اگر عددی می‌نویسید که در مقیاس نیست، یا مقیاس کم دارد (که مسئلهٔ سیستم است، نه صفحهٔ شما) یا دارید از آن خارج می‌شوید.

موارد استفاده رایج

مقیاس، به تفکیک محور

اندازه	ارتفاع کنترل	ارتفاع تودرتو	متن	padding
`xs`	۲۶px	۲۴px	`text-xs`	`px-2.5 py-1`
`sm`	۳۴px	۲۸px	`text-sm` + `leading-4`	`px-3 py-2`
`md`	۳۸px	۳۲px	`text-sm`	`px-4 py-2`
`lg`	۴۲px	۳۶px	`text-base`	`px-4 py-2`
`xl`	۵۰px	۴۴px	`text-base`	`px-6 py-3`

مقیاس در هر محور پنج‌پله نیست

پنج ارتفاع متمایز وجود دارد، ولی فقط چهار اندازهٔ متن (lg و xl هر دو text-base) و چهار پلهٔ padding (md و lg هر دو px-4 py-2). یعنی تفاوت md و lg فقط در ارتفاع است. این را بدانید تا وقتی lg را انتخاب می‌کنید انتظار متن بزرگ‌تر نداشته باشید.

کجا فشرده برویم

xs برای بسترهای متراکم ساخته شده و استفاده‌اش درست است، نه استثنا: نوار ابزار، سلول جدول، ردیف فیلتر. جدول و DataTable خودشان روی ردیف ۲۸ پیکسلی می‌نشینند (--datatable-rowheight).

اندازهٔ آیکون

آیکون‌ها مقیاس جداگانه دارند، چون داخل کنترل می‌نشینند:

توکن	مقدار
`--icon-xs`	۱۲px
`--icon-sm`	۱۶px
`--icon-md`	۱۸px
`--icon-lg`	۲۴px
`--icon-xl`	۳۲px

چه نکنیم

size="default" روی دکمه. بالا توضیح داده شد: xs می‌دهد، نه پیش‌فرض.
مخلوط‌کردن پله‌ها در یک ردیف. ناهم‌ترازی عمودی، اولین چیزی است که چشم می‌گیرد.
انتظار متن بزرگ‌تر از lg. lg و xl هر دو text-base دارند؛ تفاوتشان ارتفاع و padding است.
بازنویسی ارتفاع با کلاس دستی. h-[36px] روی یک دکمهٔ sm یعنی آن دکمه دیگر با هیچ کنترل دیگری هم‌قد نیست.

صفحات مرتبط

فضابندی — مقیاس فاصله بین المان‌ها؛ این صفحه دربارهٔ اندازهٔ خودِ کنترل است
توکن‌های طراحی — خانوادهٔ «اندازه و چگالی» در مرجع تولیدشده
دکمه — همهٔ واریانت‌ها، از جمله پیش‌تنظیم‌های آیکون‌تنها icon، icon-xs، icon-sm و icon-lg

اصل