Skip to main contentdv01 Waterfall Design System

Button Group

General guidance

Button groups are used to bunch together buttons (or menu items) with similar actions.

In certain instances, button groups can also be used in lieu of an input box—such as when there are only a few options available from which to choose, and/or when all of the options need to be continuously visible to the user.

Sizing and Design

The default choice is the medium button group. Large and small variations are also available. Buttons on the left and right edges of the button groups will have rounded outer corners and square inner corners (where they connect to other buttons). Note that the large variation will have a different corner radius than the medium and small variants.

Button groups should display a minimum of two choices, with a maximum of five. If there are four to five choices, you have the option to use the overflow variation, or consider using an input box instead. For one choice, use a regular button.

Button groups can be displayed with or without a label; the default option is to display the label.

Button States & Button Selection

Button groups will have the same states as regular buttons, with the addition of the active state: Default, hover, on click, active, focus, and disabled.

Note that a button group can only have one active choice at a given time. However, there can be multiple disabled states in a button group.

Variations

Default (Text Only)

With Dropdown

The item with the icon must always appear as the last item on the right.

With Overflow

The icon must always appear as the last item on the right.

Text + Icon

The icon must always appear as the last item on the right.

Icon Only

This variation is functionally the same as the default option, but uses iconography in lieu of text.