گروه دکمه (ButtonGroup)

معرفی

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

ButtonGroup چند اقدام مرتبط را به هم می‌چسباند: دکمهٔ دوتکه (اقدام اصلی + منوی کشویی گزینه‌ها)، بزرگ‌نمایی −/+، یا «قبلی / بعدی». هر دکمه کاری انجام می‌دهد و حالتی را نگه نمی‌دارد.

قاعده:

• چند اقدام مرتبط و چسبیده به هم ← ButtonGroup
• انتخاب یکی از چند حالت (نما، بازه، فیلتر) ← ToggleGroup، یا پیش‌تنظیم‌هایش PeriodSelector و EntityLayoutToggle
• اقدام‌های کل صفحه یا فهرست ← PageToolbar

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

• دکمهٔ دوتکه: «انتشار» + فلشی که «زمان‌بندی انتشار» را باز می‌کند
• جفت اقدام‌های قرینه مثل بزرگ‌نمایی/کوچک‌نمایی یا قبلی/بعدی

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

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

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { ButtonGroup, Button } from '@partodata/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 '@partodata/ui'
;<ButtonGroup>
  <Button variant="outline">یک</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">دو</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">سه</Button>
</ButtonGroup>

با متن

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

Props

ButtonGroup

ButtonGroupText

ButtonGroupSeparator

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

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

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

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

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