COMPONENT 13 · Actions & Menus

按钮组

Button Group

也叫Grouped ButtonsAction Group组合按钮

将一组相关操作在视觉与语义上并排组织。

Visually and semantically groups a set of related actions.

ANATOMY & USAGE

结构与使用建议

组成部分

分组容器
独立按钮
选中或禁用状态

适合使用

多个同级操作需要紧密表达关联时。

不建议使用

操作彼此无关或按钮过多导致拥挤时。

键盘与无障碍

容器提供可访问分组名称，每个按钮仍有独立名称和键盘焦点。

DESCRIBE IT TO AI

这样告诉编程助手

实现按钮组（Button Group）：将一组相关操作在视觉与语义上并排组织。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack">
  <div class="row" role="group" aria-label="文本对齐">
    <button type="button" data-value="左对齐">左对齐</button>
    <button type="button" data-value="居中">居中</button>
    <button type="button" data-value="右对齐">右对齐</button>
  </div>
  <output>尚未选择</output>
</div>