Button Groups

Button Groups join two or more buttons into a unified control, formerly called a segmented control.

Variations

Default

Use to create a mutually exclusive toggle. Buttons within the group follow the same visual and behavioral conventions as the secondary Button.

Default

Hover

Active

Focus

White Light Dark Black

<div class="mds-button-group">
    <button class="mds-button mds-button--secondary" type="button" role="button"> Cyclical </button>
    <button class="mds-button mds-button--secondary" type="button" role="button"> Defensive </button>
    <button class="mds-button mds-button--secondary" type="button" role="button"> Sensitive </button>
</div>

Disabled

White Light Dark Black

<div class="mds-button-group">
    <button class="mds-button mds-button--secondary" type="button" role="button"> Cyclical </button>
    <button class="mds-button mds-button--secondary" type="button" role="button"> Defensive </button>
    <button class="mds-button mds-button--secondary" type="button" disabled role="button"> Sensitive </button>
</div>

Full Width

Use when you want the button group to span the full width of its container.

Full Width

Cyclical Defensive Sensitive

White Light Dark Black

<div class="mds-button-group mds-button-group--justify">
    <label class="mds-button__input-outer-wrapper" for="cyclical--99969">
        <input id="cyclical--99969" class="mds-button__input" type="radio" name="radio-colors-secondary" checked>
        <span for="cyclical--99969" class="mds-button mds-button--secondary" role="button"> Cyclical </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="defensive--73253">
        <input id="defensive--73253" class="mds-button__input" type="radio" name="radio-colors-secondary">
        <span for="defensive--73253" class="mds-button mds-button--secondary" role="button"> Defensive </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="sensitive--75371">
        <input id="sensitive--75371" class="mds-button__input" type="radio" name="radio-colors-secondary">
        <span for="sensitive--75371" class="mds-button mds-button--secondary" role="button"> Sensitive </span>
    </label>
</div>

With Icons

Use Icons to provide additional affordance to a button.

With Icons

Filter Upload Search

White Light Dark Black

<div class="mds-button-group">
    <label class="mds-button__input-outer-wrapper" for="filter--53421">
        <input id="filter--53421" class="mds-button__input" type="radio" name="radio-mixed-secondary" checked>
        <span for="filter--53421" class="mds-button mds-button--secondary" role="button">
            <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                <use xlink:href="/assets/icons/mds_icons.svg#filter--s"> </use>
            </svg>
            <span class="mds-button__text"> Filter </span>
        </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="upload--9332">
        <input id="upload--9332" class="mds-button__input" type="radio" name="radio-mixed-secondary">
        <span for="upload--9332" class="mds-button mds-button--secondary" role="button">
            <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                <use xlink:href="/assets/icons/mds_icons.svg#upload--s"> </use>
            </svg>
            <span class="mds-button__text"> Upload </span>
        </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="search--90980">
        <input id="search--90980" class="mds-button__input" type="radio" name="radio-mixed-secondary">
        <span for="search--90980" class="mds-button mds-button--secondary" role="button">
            <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                <use xlink:href="/assets/icons/mds_icons.svg#search--s"> </use>
            </svg>
            <span class="mds-button__text"> Search </span>
        </span>
    </label>
</div>

Do place descriptive icons to the left of the button label.

Don‘t place descriptive icons to the right of the button label.

Do place the down-caret icon to the right of a button’s label to indicate a Menu.

Don‘t use any other directional icons in a button group.

Icon Only

Use to create toolbars.

Default

Hover

Focus

White Light Dark Black

<div class="mds-button-group mds-button-group--icon-only">
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#bell-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#create-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#question-circle-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#person-padless"> </use>
        </svg>
    </button>
</div>

Disabled

White Light Dark Black

<div class="mds-button-group mds-button-group--icon-only">
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#bell-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#create-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only mds-button--disabled" type="button" disabled role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#question-circle-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#person-padless"> </use>
        </svg>
    </button>
</div>

Always include aria-label attributes to describe each button's intent. For example, <button aria-label="Close" onclick="myDialog.close()">X</button>.
For single icons, use the icon-only Button component.

Consider pairing with a Tooltip to describe the icon’s underlying action.

Icon-only Button Group paired with a tooltip.

When pairing with a button, use a mds-space-inline-xl space, and vertically align middle the icon-only button group.
- When pairing with a small button, use the small icon-only Button.

Icon-only Button Group alignment paired with a button.

Do place all icon-only button groups to the left or right of paired buttons.

Don‘t place icon-only button groups between paired buttons.

Sizing

<div class="mds-button-group">
    <label class="mds-button__input-outer-wrapper" for="cyclical--24539">
        <input id="cyclical--24539" class="mds-button__input" type="radio" name="small" checked>
        <span for="cyclical--24539" class="mds-button mds-button--secondary mds-button--small" role="button"> Cyclical </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="defensive--35802">
        <input id="defensive--35802" class="mds-button__input" type="radio" name="small">
        <span for="defensive--35802" class="mds-button mds-button--secondary mds-button--small" role="button"> Defensive </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="sensitive--82410">
        <input id="sensitive--82410" class="mds-button__input" type="radio" name="small">
        <span for="sensitive--82410" class="mds-button mds-button--secondary mds-button--small" role="button"> Sensitive </span>
    </label>
</div>
<br>
<br>
<div class="mds-button-group">
    <label class="mds-button__input-outer-wrapper" for="filter--6051">
        <input id="filter--6051" class="mds-button__input" type="radio" name="small-with-icon" checked>
        <span for="filter--6051" class="mds-button mds-button--secondary mds-button--small" role="button">
            <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                <use xlink:href="/assets/icons/mds_icons.svg#filter--s"> </use>
            </svg>
            <span class="mds-button__text"> Filter </span>
        </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="upload--24629">
        <input id="upload--24629" class="mds-button__input" type="radio" name="small-with-icon">
        <span for="upload--24629" class="mds-button mds-button--secondary mds-button--small" role="button">
            <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                <use xlink:href="/assets/icons/mds_icons.svg#upload--s"> </use>
            </svg>
            <span class="mds-button__text"> Upload </span>
        </span>
    </label>
    <label class="mds-button__input-outer-wrapper" for="search--83413">
        <input id="search--83413" class="mds-button__input" type="radio" name="small-with-icon">
        <span for="search--83413" class="mds-button mds-button--secondary mds-button--small" role="button">
            <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                <use xlink:href="/assets/icons/mds_icons.svg#search--s"> </use>
            </svg>
            <span class="mds-button__text"> Search </span>
        </span>
    </label>
</div>
<br>
<br>
<div class="mds-button-group mds-button-group--icon-only">
    <button class="mds-button mds-button--icon-only mds-button--small" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#search--s"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only mds-button--small" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#heart--s"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only mds-button--small" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/mds_icons.svg#pencil--s"> </use>
        </svg>
    </button>
</div>

Icon Size

Icon size depends on button group type and size. In some cases, markup requires a modifier class to display the correct icon size based on a button’s size.

Type	Small	Medium	Large
Default	Small Icon	Small Icon	Medium Icon
Icon Only	Small Icon	Medium Icon	N/A

Apply the .mds-button--icon-m class to large default button groups to display a medium-sized icon.
Never use --s sized icon SVGs when including .mds-button--icon-m to size the icon.
Never apply .mds-button--icon-m to a medium or small default button groups.
The icon-only button group applies the correct icon size based the button’s size. A medium-sized icon-only button group displays a medium-sized icon, and a small-sized icon-only button group displays a small-sized icon.

Guidelines

Use When

Toggling through content in an adjacent container.
Switching units, currency, or increments.

Visual Style

Always follows the same conventions as secondary Buttons.

Behaviors

By default, the button group should start with its first item in the active state.

Editorial

This component looks best when the content is balanced.
Ideally, button labels should have the same number of words. Preferably one word each.
When impossible, button labels should be within one word of each other, count wise.
- Do: Files / Forms & Reports
- Don't: Files / Market Commentary for Advisors / Reports
See Buttons for more guidance.

Accessibility

Include a role="group" attribute for a default button group.
- If a button group is used for navigation, set role="navigation".
- If a button group is being used as a toolbar, set role="toolbar".
Include an aria-label="..." to describe the intention of the button group.
- For example, aria-label="View Toggle" could describe a button group set that changes the view of a content module below the button group.
See Buttons for more guidance.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-button-group`	`<div>`	Adding an `.mds-button-group` wrapper to a group of `.mds-buttons` initializes the button group component and adjusts the spacing between the buttons to conform into one conjoined group.
`.mds-button-group--justify`	`.mds-button-group`	Adding this modifier to the `.mds-button-group` will set the component to fill the full width of its container. The individual `.mds-button`s within the group will all receive the same widths, and be evenly dispersed across the wrapping container.
`.mds-button-group--icon-only`	`.mds-button-group`	Adding this modifier to the `.mds-button-group` will apply overrides for icon-only buttons.
`.mds-button-group--flex`	`.mds-button-group`	Adding this modifier keeps all of the buttons the same height even when one of the buttons has wrapping text. Only use when text wrapping occurs within the button group.

Link Template