پرتوپرتو

گروه دکمه (Button Group)

گروه‌بندی چند دکمه در کنار یکدیگر

معرفی

کامپوننت Button Group برای گروه‌بندی دکمه‌های مرتبط در کنار یکدیگر استفاده می‌شود.

چه زمانی استفاده نکنیم:

  • وقتی فقط یک دکمه دارید — از Button به تنهایی استفاده کنید
  • وقتی دکمه‌ها اعمال کاملاً غیرمرتبط دارند — کنار هم قرار دادن آن‌ها گمراه‌کننده است
  • وقتی بیش از ۴ دکمه دارید — DropdownMenu مناسب‌تر است

استفاده

import { ButtonGroup, Button } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <ButtonGroup>
      <Button variant="outline">راست</Button>
      <Button variant="outline">وسط</Button>
      <Button variant="outline">چپ</Button>
    </ButtonGroup>
  )
}

انواع چینش

افقی (پیش‌فرض)

<ButtonGroup orientation="horizontal">
  <Button variant="outline">یک</Button>
  <Button variant="outline">دو</Button>
  <Button variant="outline">سه</Button>
</ButtonGroup>

عمودی

<ButtonGroup orientation="vertical">
  <Button variant="outline">بالا</Button>
  <Button variant="outline">وسط</Button>
  <Button variant="outline">پایین</Button>
</ButtonGroup>

با جداکننده

import { ButtonGroup, Button, ButtonGroupSeparator } from '@parto-system-design/ui'

;<ButtonGroup>
  <Button variant="outline">یک</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">دو</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">سه</Button>
</ButtonGroup>

با متن

<ButtonGroup>
  <ButtonGroupText>انتخاب کنید:</ButtonGroupText>
  <Button variant="outline">گزینه ۱</Button>
  <Button variant="outline">گزینه ۲</Button>
</ButtonGroup>

Props

ButtonGroup

Prop

Type

ButtonGroupText

Prop

Type

ButtonGroupSeparator

Prop

Type

راهنمای استفاده

بکنید

  • دکمه‌های مرتبط از نظر عملکردی را در ButtonGroup قرار دهید - یک دکمه primary و بقیه outline یا ghost داشته باشید - اندازه یکسان برای همه دکمه‌های گروه تنظیم کنید

نکنید

  • از چند دکمه primary در یک ButtonGroup استفاده نکنید - دکمه‌هایی با اعمال متضاد (مثل «ذخیره» و «حذف») در کنار هم قرار ندهید

دسترسی‌پذیری

  • با Tab می‌توانید فوکوس را به گروه دکمه‌ها منتقل کنید
  • با Tab بین دکمه‌های داخل گروه جابه‌جا شوید
  • هر دکمه با Enter یا Space قابل فعال‌سازی است
  • برای گروه‌های عمودی، ترتیب فوکوس از بالا به پایین حفظ می‌شود
  • در صورت نیاز، از aria-label روی عنصر wrapper استفاده کنید تا هدف گروه مشخص شود

کامپوننت‌های مرتبط

  • Button — اگر فقط یک دکمه مستقل نیاز دارید، نه گروهی از دکمه‌ها
  • DropdownMenu — اگر بیش از ۳-۴ عمل دارید و فضای کافی در UI وجود ندارد
  • ToggleGroup — اگر دکمه‌ها حالت انتخاب (selected/unselected) دارند، نه فقط اجرای عمل