Docs

Button Groups

Group buttons together.

Combine a set of buttons that perform similar or related actions by wrapping them in the .joy-button-group class.

This component can use icons. For more information, check out the icons documentation.

Base

Group buttons by wrapping them in a parent <div> with the class .joy-button-group.

<div class="joy-button-group" role="group">
  <button class="joy-button">Action</button>
  <button class="joy-button" disabled="">Disabled</button>
  <button class="joy-button" disabled="">Also Disabled</button>
  <button class="joy-button">Edit</button>
  <button class="joy-button">Save</button>
  <button class="joy-button">
    <i class="fa fa-caret-down"></i>
    <span class="joy-assistive-text">More Actions</span>
  </button>
</div>

Outline

Add the class .joy-button-group--outline to .joy-button-group if you are using the outline button variant.

NOTE: .joy-button-group--outline does NOT style the buttons to be outlined. You still need to add .joy-button--outline to the buttons to give them the outline style.


<div class="joy-button-group joy-button-group--outline" role="group">
  <button class="joy-button joy-button--outline">Action</button>
  <button class="joy-button joy-button--outline" disabled="">Disabled</button>
  <button class="joy-button joy-button--outline" disabled="">Also Disabled</button>
  <button class="joy-button joy-button--outline">Edit</button>
  <button class="joy-button joy-button--outline">Save</button>
  <button class="joy-button joy-button--outline">
    <i class="fa fa-caret-down"></i>
    <span class="joy-assistive-text">More Actions</span>
  </button>
</div>

Inverse

Group buttons by wrapping them in a parent div with the class .joy-button-group.


<div class="joy-button-group joy-button-group--inverse" role="group">
  <button class="joy-button joy-button--inverse">Action</button>
  <button class="joy-button joy-button--inverse" disabled="">Disabled</button>
  <button class="joy-button joy-button--inverse" disabled="">Also Disabled</button>
  <button class="joy-button joy-button--inverse">Edit</button>
  <button class="joy-button joy-button--inverse">Save</button>
  <button class="joy-button joy-button--inverse">
    <i class="fa fa-caret-down"></i>
    <span class="joy-assistive-text">More Actions</span>
  </button>
</div>