Button Groups
- HTML/CSS:Dev Ready
- Web Component:In Progress (1 of 3 variants)
- Layout:Responsive
Sections
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.
Base#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral">Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
States#
Disabled#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral" disabled="">Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
With Overflow Menu#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral">Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
With Overflow Menu – Open#
<div class="demo-only" style="height:8.75rem">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral">Edit</button>
With Overflow Menu – Disabled#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral">Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
Examples#
Inverse#
<div class="demo-only" style="padding:0.5rem;background:#16325c">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_inverse">Refresh</button>
<button class="slds-button slds-button_inverse">Edit</button>
Inverse - Disabled#
<div class="demo-only" style="padding:0.5rem;background:#16325c">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_inverse">Refresh</button>
<button class="slds-button slds-button_inverse" disabled="">Edit</button>
Inverse - With Overflow Menu#
<div class="demo-only" style="padding:0.5rem;background:#16325c">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_inverse">Refresh</button>
<button class="slds-button slds-button_inverse">Edit</button>
Inverse - With Disabled Overflow Menu#
<div class="demo-only" style="padding:0.5rem;background:#16325c">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_inverse">Refresh</button>
<button class="slds-button slds-button_inverse">Edit</button>
Button Icon Group#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Charts" aria-pressed="false">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
Disabled#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Charts" aria-pressed="false">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
Selected#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-is-selected" title="Charts" aria-pressed="true">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
Brand Button#
With Overflow Menu#
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_brand">Save</button>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last">
<button class="slds-button slds-button_icon slds-button_icon-brand" aria-haspopup="true" title="More Actions">
With Style Encapsulation#
<div class="slds-button-group" role="group">
<div>
<button class="slds-button slds-button_neutral slds-button_first">First</button>
</div>
First/Last#
<div class="slds-button-group" role="group">
<div>
<button class="slds-button slds-button_neutral slds-button_first">First</button>
</div>
Button Icon Group#
<div class="slds-button-group" role="group">
<div>
<button class="slds-button slds-button_icon slds-button_first slds-button_icon-border-filled" title="Charts" aria-pressed="false">
<svg class="slds-button__icon" aria-hidden="true">
Button Icon Group – First/Last#
<div class="slds-button-group" role="group">
<div>
<button class="slds-button slds-button_icon slds-button_first slds-button_icon-border-filled" title="Charts" aria-pressed="false">
<svg class="slds-button__icon" aria-hidden="true">
List#
<ul class="slds-button-group-list">
<li>
<button class="slds-button slds-button_neutral">Refresh</button>
</li>
Examples#
See the Base examples for various use cases such as inverse.
Row#
<ul class="slds-button-group-row">
<li class="slds-button-group-item">
<button class="slds-button slds-button_neutral">Refresh</button>
</li>
Of Button Icons#
<ul class="slds-button-group-row">
<li class="slds-button-group-item">
<div class="slds-dropdown-trigger slds-dropdown-trigger_clicked">
<button class="slds-button slds-button_icon slds-button_icon-more" aria-haspopup="true" title="More Options">
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 |
Button Groups Release Notes
2.10.0
Changed
- For touch devices, the visual height of the button group is increased for an improved tap target size. This change comes from
slds-button
which is a child component of button-group.
2.8.0
Added
- Added the classes
slds-button_first
,slds-button_middle
, andslds-button_last
that targets the position of each button inside of a button group
2.7.0
Added
- A
1px
separator now appears when a brand button and a brand button icon are used within a button group. - Added Button Group Row component that provides spacing in between each item that contains a button