云策 WordPress 开发者社区

块编辑器开发文档

ButtonGroup

查看官方原文 ↗
💡 云策文档标注

概述

ButtonGroup 是一个已弃用的 WordPress 组件，用于将相关按钮分组，强调其关联性。开发者应迁移至 ToggleGroupControl 作为替代。

关键要点

  • ButtonGroup 已弃用，推荐使用 ToggleGroupControl。
  • 用于分组相关按钮，共享容器以增强视觉关联。
  • 设计指南：一次只能选择一个活动选项，需清晰标签、明确动作触发、适当使用颜色（如红色用于难撤销操作），并保持界面位置一致。
  • 状态管理：活动按钮需明确标识，悬停和焦点状态表达可选性，禁用状态可隐藏或显示为不可用。

代码示例

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

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

注意事项

  • 单个按钮应使用 Button 组件。
📄 原文内容
This component is deprecated. Use `ToggleGroupControl` instead.

ButtonGroup can be used to group any related buttons together. To emphasize related buttons, a group should share a common container.

ButtonGroup component

Design guidelines

Usage

Selected action

ButtonGroup selection

Do
Only one option in a button group can be selected and active at a time. Selecting one option deselects any other.

Best practices

Button groups should:

  • Be clearly and accurately labeled.
  • Clearly communicate that clicking or tapping will trigger an action.
  • Use established colors appropriately. For example, only use red buttons for actions that are difficult or impossible to undo.
  • Have consistent locations in the interface.

States

ButtonGroup component

Active and available button groups

A button group’s state makes it clear which button is active. Hover and focus states express the available selection options for buttons in a button group.

Disabled button groups

Button groups that cannot be selected can either be given a disabled state, or be hidden.

Development guidelines

Usage

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

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

Related components

  • For individual buttons, use a Button component.