ButtonGroup Edit

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

ButtonGroup component

Table of contents Table of contents

  1. Design guidelines
  2. Development guidelines
  3. Related components

Top ↑

Design guidelines Design guidelines

Usage Usage

Selected action 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.

Top ↑

Best practices 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.

Top ↑

States 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.

Top ↑

Development guidelines Development guidelines

Top ↑

Usage Usage

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

const MyButtonGroup = () => (
    <ButtonGroup>
        <Button isPrimary>Button 1</Button>
        <Button isPrimary>Button 2</Button>
    </ButtonGroup>
);

Top ↑

  • For individual buttons, use a Button component.
  • To group IconButtons use a Toolbar component.