Button Group 按钮组

按钮组为用户提供了访问频繁执行的相关操作的途径。

获取组件

MainIndividual
import { ButtonGroup, ButtonToolbar } from 'rsuite';
  • <ButtonGroup> 按钮组控件，可以把一组按钮放在一起，并统一控制布局。
  • <ButtonToolbar> 按钮工具栏控件。

演示

按钮组

将相关按钮组合在一起，实现更好的视觉组织效果。

尺寸

使用 size 属性设置按钮组中所有按钮的尺寸。

外观

使用 appearance 属性自定义按钮样式。

垂直按钮组

使用 vertical 属性垂直堆叠按钮。

分隔按钮

使用 divided 属性在按钮之间添加分隔线。

分体式按钮

通过组合 Button 和 Menu 组件创建分体式下拉按钮。

按钮工具栏

使用 ButtonToolbar 组件将多个按钮组组合在一起。

等宽

按钮在按钮组中横向布局，并且等宽。

图标

在按钮组中使用图标，提升视觉层次和识别度。

可访问性

ARIA 属性

  • ButtonGroup 具有 group 的角色。

Props

<ButtonGroup>

属性名称 类型(默认值) 描述
block boolean 将按钮组显示为块级元素，占据整个容器的宽度
classPrefix string ('btn-group') 自定义 CSS 类前缀，用于样式定制和主题适配
disabled boolean 禁用组内所有按钮
divided boolean 在按钮组中显示分隔线
justified boolean 在水平布局中均匀分配按钮宽度
size 'lg' | 'md' | 'sm' | 'xs' ('md') 为组内所有按钮设置统一尺寸（大/中/小/超小）
vertical boolean 采用垂直堆叠布局显示按钮

<ButtonToolbar>

继承 Stack 组件的所有属性