Component Blueprints
Button Groups
- HTML/CSS:Dev Ready
- Web Component:In Progress (1 of 3 variants)
- Layout:Responsive
button-groups
.slds-button-group, .slds-button-group-list, .slds-button-group-row — Button groups are used to bunch together buttons with similar actions
base
.slds-button-group — Creates button group container
base › Base - With Kinetic Buttons
base › Inverse
base › Inverse - Disabled
base › Inverse - With Overflow Menu
base › Inverse - With Overflow Menu - Disabled
base › Button Icon Group
base › Button Icon Group - Disabled
base › Button Icon Group - Selected
base › Brand Button With Overflow Menu
base › Button Group with Style Encapsulation
base › Button Group with Style Encapsulation - First/Last
base › Button Icon Group with Style Encapsulation
base › Button Icon Group with Style Encapsulation - First/Last
.slds-button_last
.slds-button_last — If the last button in the group is required to be wrapped in a div, apply this class to the div
list
.slds-button-group-list — Creates button group container for list items
list › Inverse
list › Inverse - Disabled
list › Inverse - With Overflow Menu
list › Inverse - With Overflow Menu - Disabled
list › Button Icon Group
list › Button Icon Group - Disabled
list › Button Icon Group - Selected
list › Brand Button With Overflow Menu
.slds-button_last
.slds-button_last — If the last button in the group is required to be wrapped in a div, apply this class to the div
row
.slds-button-group-row — Creates button group container that provides spacing between each button
row › Row of button icons
.slds-button-group-item
.slds-button-group-item — Each item inside of a button group row that needs spacing applied to it