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>

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>

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>

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>

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>

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>

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>

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>

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 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">

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">

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">

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">

With Style Encapsulation

<div class="slds-button-group" role="group">
  <div>
    <button class="slds-button slds-button_neutral slds-button_first">First</button>

First/Last

<div class="slds-button-group" role="group">
  <div>
    <button class="slds-button slds-button_neutral slds-button_first">First</button>

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">

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">

List

<ul class="slds-button-group-list">
  <li>
    <button class="slds-button slds-button_neutral">Refresh</button>

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>

Of Button Icons

<ul class="slds-button-group-row">
  <li class="slds-button-group-item">
    <div class="slds-dropdown-trigger slds-dropdown-trigger_clicked">