Component Blueprints

Button Groups

Button groups are used to bunch together buttons with similar actions

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.slds-button-group
Summary

Creates button group container

Supportdev-ready
Restrictdiv
VariantTrue
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

Supportdev-ready
Restrictul
VariantTrue
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

Supportdev-ready
Restrictdiv, ul
VariantTrue
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, and slds-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