此组件已弃用。请改用 ToggleGroupControl。

ButtonGroup 可用于将任何相关的按钮组合在一起。为了强调相关按钮，组应共享一个公共容器。

ButtonGroup 组件

设计指南

用法

选定的操作

ButtonGroup 选择

建议
按钮组中一次只能选择一个选项并处于活动状态。选择一个选项会取消选择其他任何选项。

最佳实践

按钮组应当：

  • 具有清晰且准确的标签。
  • 清楚地表明点击或触摸将触发操作。
  • 适当使用既定的颜色。例如，仅对难以或无法撤销的操作使用红色按钮。
  • 在界面中具有一致的位置。

状态

ButtonGroup 组件

可用且活动的按钮组

按钮组的状态使其清晰地显示哪个按钮处于活动状态。悬停和焦点状态表达了按钮组中按钮的可用选择选项。

禁用的按钮组

无法选择的按钮组可以设置为禁用状态，或者被隐藏。

开发指南

用法

import { Button, ButtonGroup } from '@wordpress/components';

const MyButtonGroup = () => (
    <ButtonGroup>
        <Button variant="primary">Button 1</Button>
        <Button variant="primary">Button 2</Button>
    </ButtonGroup>
);

相关组件

  • 对于单个按钮，请使用 Button 组件。