Button

کامپوننت دکمه برای اجرای کنش‌های فوری، با چند سبک و چند حالت.

کجا به کارش ببرید: وقتی به یک کنترلِ کنشِ کلیک‌شدنی نیاز دارید که سبک‌های آمادهٔ primary/contrast/warning/text به‌همراه حالت غیرفعال و آیکون داشته باشد. به‌جای استایل‌دادن به <button> خام، سراغ <r-button> بروید.

شروع سریع

استفادهٔ پایه

Button

<r-button>Button</r-button>

مرجع API

خصیصه‌ها

خصیصه	نوع	پیش‌فرض	توضیح
`type`	`string`	`'default'`	نوع دکمه: `default`، `primary`، `contrast`، `warning`، `text`
`disabled`	`boolean`	`false`	اینکه دکمه غیرفعال باشد یا نه
`icon`	`string`	`''`	نام آیکون دکمه
`effect`	`boolean`	`true`	اینکه جلوهٔ موجِ کلیک نمایش داده شود یا نه

انواع دکمه `type`

Primary Button

Warning Button

Text Button

Default Button

<r-button type="primary">Primary Button</r-button>
<r-button type="warning">Warning Button</r-button>
<r-button type="text">Text Button</r-button>
<r-button>Default Button</r-button>

primary کنشِ تک‌رنگ است (برگرفته از زبان طراحی Geist): در پوستهٔ روشن سیاه روی سفید و در پوستهٔ تیره سفید روی سیاه. آبی اینجا هیچ معنای برندی ندارد و برای پیوندها و حلقهٔ فوکوس کنار گذاشته شده است. این کنش روی توکن‌های --ran-color-primary* سوار است (--ran-color-primary، -hover، -active و --ran-color-primary-text برای جوهر وارونه)؛ پوسته و توکن‌ها را ببینید.

حالت غیرفعال `disabled`

Primary Button

Warning Button

Text Button

Default Button

<r-button type="primary" disabled>Primary Button</r-button>
<r-button type="warning" disabled>Warning Button</r-button>
<r-button type="text" disabled>Text Button</r-button>
<r-button disabled>Default Button</r-button>

دکمهٔ آیکون‌دار `icon`

💡 نکته: اگر جای‌گذاری دقیق آیکون مهم است، مستقیم از کامپوننت Icon استفاده کنید.

Default Button

Primary Button

<r-button type="default" icon="user">Default Button</r-button>
<r-button type="primary" icon="home">Primary Button</r-button>

مهار جلوه `effect`

موجِ کلیک به‌طور پیش‌فرض روشن است. برای دکمه‌ای ساده و بدون آن، effect="false" را بگذارید. دو دکمهٔ زیر فقط در همین ویژگی فرق دارند، پس با کلیک روی هرکدام می‌توانید مقایسه کنید. موج جلوه‌ای برای دستگاه‌های اشاره‌گر است و تنها از عرض ۱۰۲۴ پیکسل به بالا ترسیم می‌شود.

با موج (پیش‌فرض)

بدون موج

<r-button type="primary" icon="home">با موج (پیش‌فرض)</r-button>
<r-button type="primary" icon="home" effect="false">بدون موج</r-button>

تنها مقدار عینی false موج را خاموش می‌کند؛ effect="true" و هر مقدار دیگری آن را روشن می‌گذارند. از سمت کد، خصیصه را به‌صورت بولی تعیین کنید: button.effect = false.

رویدادها

<r-button onclick="handleClick()">Click Me</r-button>

<script>
  function handleClick() {
    console.log('Button clicked');
  }
</script>

استایل

<r-button> ۴۳ ویژگی سفارشی CSS از آنِ خود در اختیار می‌گذارد: --ran-btn-background، --ran-btn-color، --ran-btn-border-color و گونه‌های hover و active آن‌ها، سه توکن گونهٔ warning، و افزون بر این‌ها توکن‌های معنایی‌ای که از پوسته می‌خواند.

/* یک دکمه، یا همهٔ دکمه‌های زیر یک محدوده */
r-button {
  --ran-btn-background: var(--ran-color-bg-subtle);
  --ran-btn-hover-background: var(--ran-color-bg-hover);
  --ran-btn-border-radius: var(--ran-radius-full);
}

اگر تغییری که می‌خواهید مخصوص دکمه نیست، به‌جایش سراغ یک توکن معنایی بروید: بازنویسی --ran-color-primary ظاهر کنش اصلی را همه‌جا عوض می‌کند، نه فقط اینجا.

Part‌ها: button · content

r-button::part(content) {
  letter-spacing: 0.02em;
}

فهرست کامل در توکن‌های استایل است و اینکه کدام توکن را برگزینید در سیستم طراحی آمده.

بهترین شیوه‌ها

کنش‌های اصلی: از type="primary" استفاده کنید (تک‌رنگ: سیاه روی سفید / سفید روی سیاه)
کنش‌های خطرناک: از type="warning" استفاده کنید
کنش‌های فرعی: از type="text" استفاده کنید
حالت غیرفعال: وقتی کنش در دسترس نیست از disabled استفاده کنید
آیکون‌ها: آیکون مرتبط بیفزایید تا کار کاربر ساده‌تر شود