گروه دکمه (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
ButtonGroupText
ButtonGroupSeparator
راهنمای استفاده
بکنید
- دکمههای مرتبط از نظر عملکردی را در ButtonGroup قرار دهید - یک دکمه primary و بقیه outline یا ghost داشته باشید - اندازه یکسان برای همه دکمههای گروه تنظیم کنید
نکنید
- از چند دکمه primary در یک ButtonGroup استفاده نکنید - دکمههایی با اعمال متضاد (مثل «ذخیره» و «حذف») در کنار هم قرار ندهید
دسترسیپذیری
- با Tab میتوانید فوکوس را به گروه دکمهها منتقل کنید
- با Tab بین دکمههای داخل گروه جابهجا شوید
- هر دکمه با Enter یا Space قابل فعالسازی است
- برای گروههای عمودی، ترتیب فوکوس از بالا به پایین حفظ میشود
- در صورت نیاز، از
aria-labelروی عنصر wrapper استفاده کنید تا هدف گروه مشخص شود
کامپوننتهای مرتبط
- Button — اگر فقط یک دکمه مستقل نیاز دارید، نه گروهی از دکمهها
- DropdownMenu — اگر بیش از ۳-۴ عمل دارید و فضای کافی در UI وجود ندارد
- ToggleGroup — اگر دکمهها حالت انتخاب (selected/unselected) دارند، نه فقط اجرای عمل