Button Groups

Button Groups

Button groups are used to bunch together buttons with similar actions

Base

Preview

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

No content has been added for this component.

No content has been added for this component.