Button Group 按钮组
将语义相关的一组操作按钮组织为连续且清晰的操作区。
使用概览
适合使用
- 多个同级操作需要紧密排列并共享分组语义时。
不建议使用
- 操作彼此无关或危险操作需要明显隔离时。
真实示例
编辑操作组
将撤销与重做放入一个具名操作集合。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/button-group.json基础用法
导入
import { ButtonGroup } from "@richardqiu/quartz/button-group";JSX
<ButtonGroup aria-label="编辑操作"><button type="button">撤销</button><button type="button">重做</button></ButtonGroup>状态与控制摘要
默认
键盘焦点可见
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 决定组内操作沿水平或垂直方向排列。 |
组合结构
- 01
ButtonGroup
键盘约定
- Tab 按文档顺序访问组内可用按钮，Enter 或空格键激活当前按钮。
可访问性契约
- 通过 aria-label 或 aria-labelledby 为按钮组命名。
- orientation 应与可见排列方向保持一致。