ButtonGroup

Anatomy

Structure

<ButtonGroup>
    {/* ButtonGroup requires at least two button components */}
    <Button /> /* A button in the button group */
    <LinkButton /> /* A link button in the button group */
</ButtonGroup>

Composed Components

A ButtonGroup uses the following component.

Usage

Orientation

A button group can render his items vertically.

Alignment

A button group can change the alignment of his items.

Disabled

A button group can be disabled.

Fluid

A button group can be fluid.

Sizes

A button group can be of different sizes.

Best Practices

Emphasis

You don't necessarily need to use the buttons in the order that their labels imply. For example, you don't always need to use the secondary button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your interface. Keep these best practices in mind.

A single, high-emphasis button

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.

Multiple button emphasis

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Keep in mind that you should only groups together calls to action that have a relationship to one another.

Alignment

Alignment refers to whether the buttons are aligned to the right or the left of a container or layout. Buttons are unique, more so than any other component, in that their alignment depends on where they appear and whether or not they're contained within another component.

As a general rule, on full-page designs, the primary button is on the right side of the page. When the browser window is large and the user is scrolling to read, it's best to have the primary button where the users's attention has been focused all along. Whereas in wizards, where a user is progressing through a series of steps or modal, the primary action traditionally sits at the bottom right. Buttons within components are also right-aligned.

Props

Migration Notes