ButtonGroup

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

Design guidelines

Usage

Selected action

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

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.