ButtonGroup

基础布局

基于 Bootstrap 5 的按钮组组件，将一系列按钮组合为水平或垂直的视觉分组，并提供按钮工具栏以组合多个分组

Component Demo

Basic usage and examples of the ButtonGroup component

基础用法

混合样式

轮廓样式

复选按钮组

选项 1选项 2选项 3

已选中：选项 1

单选按钮组

单选 1单选 2单选 3

已选中：单选 1

按钮工具栏

尺寸

通过 size 属性统一设置整组按钮尺寸，无需为每个按钮单独指定

垂直排列

单选 1单选 2单选 3

组合使用

API Documentation

Complete API reference for the ButtonGroup component

Props

ButtonGroup

属性名	类型	默认值	描述
`vertical`	`boolean`	`false`	是否垂直排列组内按钮，默认为水平排列
`size`	`ButtonSize`	-	统一设置组内所有按钮的尺寸，可选 `sm` 或 `lg`

Common Props

属性名	类型	默认值	描述
`role`	`AriaRole`	`'group' / 'toolbar'`	无障碍 ARIA 角色，ButtonGroup 默认为 `group`，ButtonToolbar 默认为 `toolbar`
`aria-label`	`string`	-	无障碍标签，向屏幕阅读器描述分组用途（ButtonGroup 与 ButtonToolbar 均支持）
`children`	`ReactNode`	-	组内子元素，通常为 `Button` 组件或复选/单选按钮组
`className`	`string`	-	自定义类名
`...rest`	`HTMLAttributes<HTMLDivElement>`	-	原生 div 元素的所有属性（如 `onClick`、`onFocus` 等）

Type Definitions

ButtonGroupProps

按钮组组件属性接口

export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
  size?: ButtonSize;
  vertical?: boolean;
}

ButtonSize

按钮尺寸类型，复用自 Button 组件

type ButtonSize = 'sm' | 'lg';

ButtonToolbarProps

按钮工具栏组件属性接口

export interface ButtonToolbarProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
}