Button Groups

Button Groups

Button groups are used to bunch together buttons with similar actions

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Button Groups

Buttons in a group are surrounded by a parent with the .slds-button-group class, unless they are in a list (in which case they use .slds-button-group-list. If the last button is an icon, like the down triangle, use the .slds-button_icon-border-filled class when accompanying a .slds-button_neutral group.

If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the .slds-button_last class to the wrapper element to create proper spacing and borders.

Accessibility

Unless you are using the list version, include the Aria role role="group" so that assistive technologies are alerted to the grouping.


Overview of CSS Classes

Selector.slds-button-group
Summary

Creates button group container

Restrictdiv
VariantTrue
Selector.slds-button_last
Summary

These selectors must remain in long hand in order to zero out borders that we don't want on last-child or :only-child wrapped buttons

Restrict.slds-button-group div, .slds-button-group-list div