Components

Button Groups

You can group buttons together to create a navigation bar.

BaseBase › DefaultBase › Default DisabledBase › More IconBase › More Icon OpenBase › More Icon DisabledBase › InverseBase › Inverse DisabledBase › Inverse More Icon DisabledBasedev ready

Preview

Code

<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>
</div>

If the last button is wrapped in another element (for example, a div holding a dropdown menu), place the .slds-button--last class on the wrapping element instead.

For the inverse version of the button group, use the .slds-button--inverse class.

Note: The inverse group is seen on the edit dashboard. The disabled attribute might not be applicable in this situation.

Icon GroupIcon Group › DefaultIcon Group › SelectedIcon Groupdev ready

Preview

Code

<div class="slds-button-group" role="group">
  <button class="slds-button slds-button--icon-border" title="Charts">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
    </svg>
    <span class="slds-assistive-text">Charts</span>
  </button>
  <button class="slds-button slds-button--icon-border" title="Filter List">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
    </svg>
    <span class="slds-assistive-text">Filter List</span>
  </button>
  <button class="slds-button slds-button--icon-more" aria-haspopup="true" title="More Actions">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
    </svg>
    <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Settings</span>
  </button>
</div>

An icon group is primarily used in the anchor of a page that can change views or be sorted. It usually contains stateful icon buttons.

ListList › DefaultList › Default DisabledList › More IconList › More Icon OpenList › More Icon DisabledList › InverseList › Inverse DisabledList › Inverse More Icon DisabledListprototype

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

The list variant of button groups puts the buttons in an unordered list. This is the recommended variant for menus.

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create button-groups.
Class NameUsage
.slds-button-group
Applied to:

div

Outcome:

Initializes a grouped set of buttons

Required:

Required

Comments:

Changes the rounding and borders of buttons within to look like a group

.slds-button-group-list
Applied to:

ul

Outcome:

Initializes a grouped set of buttons if used with an unordered list

Required:

Required

Comments:

Changes the rounding and borders of buttons within to look like a group

.slds-button--last
Applied to:

button wrapper

Outcome:

Identifies the last button when wrapped in another element

Required:

No, optional element or modifier

Comments:

Only required if the .slds-button is wrapped. ie- to include a dropdown

.slds-toggle-visibility
Deprecated
Applied to:

.slds-button

Outcome:

Identifies the last icon button when it should be hidden when `[disabled]`

Required:

No, optional element or modifier

Comments:

No longer required since the icon button should simply appear disabled instead of being hidden