Button Group

نصب

pnpm dlx @simurgh-ui/cli add button-group

import {
  ButtonGroup,
  ButtonGroupText,
  ButtonGroupSeparator,
} from '@simurgh-ui/react/button-group';
import '@simurgh-ui/styles/button-group.css';

Vue همین partها را از @simurgh-ui/vue/button-group و Angular کامپوننت‌های متناظر را از @simurgh-ui/angular/button-group صادر می‌کند.

پیش‌نمایش واقعی

Live component Button Group

Align

استفاده

<ButtonGroup aria-label="تراز متن">
  <Button>راست</Button>
  <Button>وسط</Button>
  <Button>چپ</Button>
</ButtonGroup>

<simurgh-button-group aria-label="تراز متن">
  <simurgh-button>راست</simurgh-button>
  <simurgh-button>وسط</simurgh-button>
  <simurgh-button>چپ</simurgh-button>
</simurgh-button-group>

semantics

Group باید accessible name داشته باشد. هر Button همچنان action مستقل خود را حفظ می‌کند و Tab طبق ترتیب DOM میان آن‌ها حرکت می‌کند. برای انتخاب یک state پایدار به‌جای مجموعهٔ action از Toggle Group استفاده کنید.

ButtonGroupText متن غیرتعاملی و ButtonGroupSeparator مرز بصری میان زیرگروه‌هاست. separator تزئینی نباید در accessibility tree خوانده شود. orientation بصری را با ترتیب منطقی DOM و RTL هماهنگ نگه دارید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.