Button Groups
- HTML/CSS:Dev Ready
- Layout:Responsive
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-button-group |
|---|---|
| Summary | Creates button group container |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-button_last |
|---|---|
| Summary | If the last button in the group is required to be wrapped in a div, apply this class to the div |
| Restrict | .slds-button-group div, .slds-button-group-list div |
| Selector | .slds-button-group-list |
|---|---|
| Summary | Creates button group container for list items |
| Support | dev-ready |
| Restrict | ul |
| Variant | True |
| Selector | .slds-button_last |
|---|---|
| Summary | If the last button in the group is required to be wrapped in a div, apply this class to the div |
| Restrict | .slds-button-group div, .slds-button-group-list div |
| Selector | .slds-button-group-row |
|---|---|
| Summary | Creates button group container that provides spacing between each button |
| Support | dev-ready |
| Restrict | div, ul |
| Variant | True |
| Selector | .slds-button-group-item |
|---|---|
| Summary | Each item inside of a button group row that needs spacing applied to it |
| Restrict | .slds-button-group-row li, .slds-button-group-row div |