定价

ButtonGroup

将相关按钮组合为统一的操作组,支持分割线,适合拆分按钮和紧凑工具栏。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中;本页展示网站用法,支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费,不属于项目,不占项目或开发者席位额度,无需 SnowUI 注册、激活或付费证明。

如何使用

用于排列相关按钮并统一组内组合。需要不足宽度时收进更多菜单,用 OverflowActions。

  • 直接放置 Button 即可形成分组;内置分割线由 showSeparator 控制。

  • 组统一提供 variant / size / disabled 等配置;子 Button 的显式 size 可覆盖组尺寸。

导入

import { ButtonGroup } from '@snowui-design-system/components';

用法

灰色变体

填充变体

描边变体

无边框变体

不带分隔线

API 参考

属性 类型 默认值 示例 描述
variant ButtonGroupVariant "gray" variant={value} 外壳视觉变体
size ButtonGroupSize — size={value} 控制外壳和嵌入 Button 的密度;显式值优先,其次父级尺寸上下文,再回退 sm。子 Button 的显式 size 可覆盖继承值。
disabled boolean false disabled 禁用整个 ButtonGroup,并传递给内部嵌入态 Button
showSeparator boolean true showSeparator 显示相邻 Button 单元格之间的内置装饰分割线;false 关闭全部分割线,不改变各按钮的操作与分组布局。
children Snippet — <ButtonGroup>Content</ButtonGroup> 显式放置可独立操作的 Button;直系 Button 自动成为分组单元格并继承组配置,分割线由组内建,无需手写 Separator。