Since Shoelace 2.0 Code stable Pattern Tentative Figma Needed

Button Group

<sl-button-group> | SlButtonGroup

Button groups can be used to group related buttons into sections.

Examples

Basic Button Group

Left Center Right 
<sl-button-group label="Alignment">
  <sl-button>Left</sl-button>
  <sl-button>Center</sl-button>
  <sl-button>Right</sl-button>
</sl-button-group>

sl-button-group label="Alignment"
  sl-button Left
  sl-button Center
  sl-button Right

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';

const App = () => (
  <SlButtonGroup label="Alignment">
    <SlButton>Left</SlButton>
    <SlButton>Center</SlButton>
    <SlButton>Right</SlButton>
  </SlButtonGroup>
);

Button Sizes

All button sizes are supported, but avoid mixing sizes within the same button group.

Left Center Right

Left Center Right

Left Center Right 
<sl-button-group label="Alignment">
  <sl-button size="small">Left</sl-button>
  <sl-button size="small">Center</sl-button>
  <sl-button size="small">Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button size="medium">Left</sl-button>
  <sl-button size="medium">Center</sl-button>
  <sl-button size="medium">Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button size="large">Left</sl-button>
  <sl-button size="large">Center</sl-button>
  <sl-button size="large">Right</sl-button>
</sl-button-group>

sl-button-group label="Alignment"
  sl-button size="small" Left
  sl-button size="small" Center
  sl-button size="small" Right
br
br
sl-button-group label="Alignment"
  sl-button size="medium" Left
  sl-button size="medium" Center
  sl-button size="medium" Right
br
br
sl-button-group label="Alignment"
  sl-button size="large" Left
  sl-button size="large" Center
  sl-button size="large" Right

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';

const App = () => (
  <>
    <SlButtonGroup label="Alignment">
      <SlButton size="small">Left</SlButton>
      <SlButton size="small">Center</SlButton>
      <SlButton size="small">Right</SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton size="medium">Left</SlButton>
      <SlButton size="medium">Center</SlButton>
      <SlButton size="medium">Right</SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton size="large">Left</SlButton>
      <SlButton size="large">Center</SlButton>
      <SlButton size="large">Right</SlButton>
    </SlButtonGroup>
  </>
);

Theme Buttons

Theme buttons are supported through the button’s variant attribute.

Left Center Right

Left Center Right

Left Center Right

Left Center Right

Left Center Right 
<sl-button-group label="Alignment">
  <sl-button variant="primary">Left</sl-button>
  <sl-button variant="primary">Center</sl-button>
  <sl-button variant="primary">Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button variant="success">Left</sl-button>
  <sl-button variant="success">Center</sl-button>
  <sl-button variant="success">Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button variant="neutral">Left</sl-button>
  <sl-button variant="neutral">Center</sl-button>
  <sl-button variant="neutral">Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button variant="warning">Left</sl-button>
  <sl-button variant="warning">Center</sl-button>
  <sl-button variant="warning">Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button variant="danger">Left</sl-button>
  <sl-button variant="danger">Center</sl-button>
  <sl-button variant="danger">Right</sl-button>
</sl-button-group>

sl-button-group label="Alignment"
  sl-button variant="primary" Left
  sl-button variant="primary" Center
  sl-button variant="primary" Right
br
br
sl-button-group label="Alignment"
  sl-button variant="success" Left
  sl-button variant="success" Center
  sl-button variant="success" Right
br
br
sl-button-group label="Alignment"
  sl-button variant="neutral" Left
  sl-button variant="neutral" Center
  sl-button variant="neutral" Right
br
br
sl-button-group label="Alignment"
  sl-button variant="warning" Left
  sl-button variant="warning" Center
  sl-button variant="warning" Right
br
br
sl-button-group label="Alignment"
  sl-button variant="danger" Left
  sl-button variant="danger" Center
  sl-button variant="danger" Right

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';

const App = () => (
  <>
    <SlButtonGroup label="Alignment">
      <SlButton variant="primary">Left</SlButton>
      <SlButton variant="primary">Center</SlButton>
      <SlButton variant="primary">Right</SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton variant="success">Left</SlButton>
      <SlButton variant="success">Center</SlButton>
      <SlButton variant="success">Right</SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton variant="neutral">Left</SlButton>
      <SlButton variant="neutral">Center</SlButton>
      <SlButton variant="neutral">Right</SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton variant="warning">Left</SlButton>
      <SlButton variant="warning">Center</SlButton>
      <SlButton variant="warning">Right</SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton variant="danger">Left</SlButton>
      <SlButton variant="danger">Center</SlButton>
      <SlButton variant="danger">Right</SlButton>
    </SlButtonGroup>
  </>
);

Pill Buttons

Pill buttons are supported through the button’s pill attribute.

Left Center Right

Left Center Right

Left Center Right 
<sl-button-group label="Alignment">
  <sl-button size="small" pill>Left</sl-button>
  <sl-button size="small" pill>Center</sl-button>
  <sl-button size="small" pill>Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button size="medium" pill>Left</sl-button>
  <sl-button size="medium" pill>Center</sl-button>
  <sl-button size="medium" pill>Right</sl-button>
</sl-button-group>

<br /><br />

<sl-button-group label="Alignment">
  <sl-button size="large" pill>Left</sl-button>
  <sl-button size="large" pill>Center</sl-button>
  <sl-button size="large" pill>Right</sl-button>
</sl-button-group>

sl-button-group label="Alignment"
  sl-button size="small" pill="true" Left
  sl-button size="small" pill="true" Center
  sl-button size="small" pill="true" Right
br
br
sl-button-group label="Alignment"
  sl-button size="medium" pill="true" Left
  sl-button size="medium" pill="true" Center
  sl-button size="medium" pill="true" Right
br
br
sl-button-group label="Alignment"
  sl-button size="large" pill="true" Left
  sl-button size="large" pill="true" Center
  sl-button size="large" pill="true" Right

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';

const App = () => (
  <>
    <SlButtonGroup label="Alignment">
      <SlButton size="small" pill>
        Left
      </SlButton>
      <SlButton size="small" pill>
        Center
      </SlButton>
      <SlButton size="small" pill>
        Right
      </SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton size="medium" pill>
        Left
      </SlButton>
      <SlButton size="medium" pill>
        Center
      </SlButton>
      <SlButton size="medium" pill>
        Right
      </SlButton>
    </SlButtonGroup>

    <br />
    <br />

    <SlButtonGroup label="Alignment">
      <SlButton size="large" pill>
        Left
      </SlButton>
      <SlButton size="large" pill>
        Center
      </SlButton>
      <SlButton size="large" pill>
        Right
      </SlButton>
    </SlButtonGroup>
  </>
);

Dropdowns can be placed inside button groups as long as the trigger is an <sl-button> element.

Button Button Dropdown Item 1 Item 2 Item 3 
<sl-button-group label="Example Button Group">
  <sl-button>Button</sl-button>
  <sl-button>Button</sl-button>
  <sl-dropdown>
    <sl-button slot="trigger" caret>Dropdown</sl-button>
    <sl-menu>
      <sl-menu-item>Item 1</sl-menu-item>
      <sl-menu-item>Item 2</sl-menu-item>
      <sl-menu-item>Item 3</sl-menu-item>
    </sl-menu>
  </sl-dropdown>
</sl-button-group>

sl-button-group label="Example Button Group"
  sl-button Button
  sl-button Button
  sl-dropdown
    sl-button slot="trigger" caret="true" Dropdown
    sl-menu
      sl-menu-item Item 1
      sl-menu-item Item 2
      sl-menu-item Item 3

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';
import SlDropdown from '@teamshares/shoelace/dist/react/dropdown';
import SlMenu from '@teamshares/shoelace/dist/react/menu';
import SlMenuItem from '@teamshares/shoelace/dist/react/menu-item';

const App = () => (
  <SlButtonGroup label="Example Button Group">
    <SlButton>Button</SlButton>
    <SlButton>Button</SlButton>
    <SlDropdown>
      <SlButton slot="trigger" caret>
        Dropdown
      </SlButton>
      <SlMenu>
        <SlMenuItem>Item 1</SlMenuItem>
        <SlMenuItem>Item 2</SlMenuItem>
        <SlMenuItem>Item 3</SlMenuItem>
      </SlMenu>
    </SlDropdown>
  </SlButtonGroup>
);

Split Buttons

Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices. Also use a no-pad-l class to remove extra padding from the caret button.

Save More options Save Save as… Save all 
<sl-button-group label="Example Button Group">
  <sl-button variant="primary">Save</sl-button>
  <sl-dropdown placement="bottom-end">
    <sl-button class="no-pad-l" slot="trigger" variant="primary" caret>
      <sl-visually-hidden>More options</sl-visually-hidden>
    </sl-button>
    <sl-menu>
      <sl-menu-item>Save</sl-menu-item>
      <sl-menu-item>Save as&hellip;</sl-menu-item>
      <sl-menu-item>Save all</sl-menu-item>
    </sl-menu>
  </sl-dropdown>
</sl-button-group>

sl-button-group label="Example Button Group"
  sl-button variant="primary" Save
  sl-dropdown placement="bottom-end"
    sl-button.no-pad-l slot="trigger" variant="primary" caret="true"
      sl-visually-hidden More options
    sl-menu
      sl-menu-item Save
      sl-menu-item Save as&hellip;
      sl-menu-item Save all

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';
import SlDropdown from '@teamshares/shoelace/dist/react/dropdown';
import SlMenu from '@teamshares/shoelace/dist/react/menu';
import SlMenuItem from '@teamshares/shoelace/dist/react/menu-item';

const App = () => (
  <SlButtonGroup label="Example Button Group">
    <SlButton variant="primary">Save</SlButton>
    <SlDropdown placement="bottom-end">
      <SlButton class="no-pad-l" slot="trigger" variant="primary" caret></SlButton>
      <SlMenu>
        <SlMenuItem>Save</SlMenuItem>
        <SlMenuItem>Save as&hellip;</SlMenuItem>
        <SlMenuItem>Save all</SlMenuItem>
      </SlMenu>
    </SlDropdown>
  </SlButtonGroup>
);

Tooltips in Button Groups

Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.

Left Center Right 
<sl-button-group label="Alignment">
  <sl-tooltip content="I am on the left">
    <sl-button>Left</sl-button>
  </sl-tooltip>

  <sl-tooltip content="I am in the middle">
    <sl-button>Center</sl-button>
  </sl-tooltip>

  <sl-tooltip content="I am on the right">
    <sl-button>Right</sl-button>
  </sl-tooltip>
</sl-button-group>

sl-button-group label="Alignment"
  sl-tooltip content="I am on the left"
    sl-button Left
  sl-tooltip content="I am in the middle"
    sl-button Center
  sl-tooltip content="I am on the right"
    sl-button Right

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';
import SlTooltip from '@teamshares/shoelace/dist/react/tooltip';

const App = () => (
  <>
    <SlButtonGroup label="Alignment">
      <SlTooltip content="I am on the left">
        <SlButton>Left</SlButton>
      </SlTooltip>

      <SlTooltip content="I am in the middle">
        <SlButton>Center</SlButton>
      </SlTooltip>

      <SlTooltip content="I am on the right">
        <SlButton>Right</SlButton>
      </SlTooltip>
    </SlButtonGroup>
  </>
);

Toolbar Example

Create interactive toolbars with button groups.

<div class="button-group-toolbar">
  <sl-button-group label="History">
    <sl-tooltip content="Undo">
      <sl-button><sl-icon name="arrow-uturn-left" label="Undo"></sl-icon></sl-button>
    </sl-tooltip>
    <sl-tooltip content="Redo">
      <sl-button><sl-icon name="arrow-uturn-right" label="Redo"></sl-icon></sl-button>
    </sl-tooltip>
  </sl-button-group>

  <sl-button-group label="Formatting">
    <sl-tooltip content="Bold">
      <sl-button><sl-icon name="at-symbol" label="Bold"></sl-icon></sl-button>
    </sl-tooltip>
    <sl-tooltip content="Italic">
      <sl-button><sl-icon name="bolt" label="Italic"></sl-icon></sl-button>
    </sl-tooltip>
    <sl-tooltip content="Underline">
      <sl-button><sl-icon name="no-symbol" label="Underline"></sl-icon></sl-button>
    </sl-tooltip>
  </sl-button-group>

  <sl-button-group label="Alignment">
    <sl-tooltip content="Align Left">
      <sl-button><sl-icon name="bars-3-bottom-left" label="Align Left"></sl-icon></sl-button>
    </sl-tooltip>
    <sl-tooltip content="Align Center">
      <sl-button><sl-icon name="bars-3" label="Align Center"></sl-icon></sl-button>
    </sl-tooltip>
    <sl-tooltip content="Align Right">
      <sl-button><sl-icon name="bars-3-bottom-right" label="Align Right"></sl-icon></sl-button>
    </sl-tooltip>
  </sl-button-group>
</div>

<style>
  .button-group-toolbar sl-button-group:not(:last-of-type) {
    margin-right: var(--sl-spacing-x-small);
  }
</style>

div.button-group-toolbar
  sl-button-group label="History"
    sl-tooltip content="Undo"
      sl-button
        sl-icon name="arrow-uturn-left" label="Undo"
    sl-tooltip content="Redo"
      sl-button
        sl-icon name="arrow-uturn-right" label="Redo"
  sl-button-group label="Formatting"
    sl-tooltip content="Bold"
      sl-button
        sl-icon name="at-symbol" label="Bold"
    sl-tooltip content="Italic"
      sl-button
        sl-icon name="bolt" label="Italic"
    sl-tooltip content="Underline"
      sl-button
        sl-icon name="no-symbol" label="Underline"
  sl-button-group label="Alignment"
    sl-tooltip content="Align Left"
      sl-button
        sl-icon name="bars-3-bottom-left" label="Align Left"
    sl-tooltip content="Align Center"
      sl-button
        sl-icon name="bars-3" label="Align Center"
    sl-tooltip content="Align Right"
      sl-button
        sl-icon name="bars-3-bottom-right" label="Align Right"

css:
  .button-group-toolbar sl-button-group:not(:last-of-type) {
    margin-right: var(--sl-spacing-x-small);
  }

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlButtonGroup from '@teamshares/shoelace/dist/react/button-group';
import SlIcon from '@teamshares/shoelace/dist/react/icon';
import SlTooltip from '@teamshares/shoelace/dist/react/tooltip';

const css = `
  .button-group-toolbar sl-button-group:not(:last-of-type) {
    margin-right: var(--sl-spacing-x-small);
  }
`;

const App = () => (
  <>
    <div className="button-group-toolbar">
      <SlButtonGroup label="History">
        <SlTooltip content="Undo">
          <SlButton>
            <SlIcon name="arrow-uturn-left"></SlIcon>
          </SlButton>
        </SlTooltip>
        <SlTooltip content="Redo">
          <SlButton>
            <SlIcon name="arrow-uturn-right"></SlIcon>
          </SlButton>
        </SlTooltip>
      </SlButtonGroup>

      <SlButtonGroup label="Formatting">
        <SlTooltip content="Bold">
          <SlButton>
            <SlIcon name="at-symbol"></SlIcon>
          </SlButton>
        </SlTooltip>
        <SlTooltip content="Italic">
          <SlButton>
            <SlIcon name="bolt"></SlIcon>
          </SlButton>
        </SlTooltip>
        <SlTooltip content="Underline">
          <SlButton>
            <SlIcon name="no-symbol"></SlIcon>
          </SlButton>
        </SlTooltip>
      </SlButtonGroup>

      <SlButtonGroup label="Alignment">
        <SlTooltip content="Align Left">
          <SlButton>
            <SlIcon name="bars-3-bottom-left"></SlIcon>
          </SlButton>
        </SlTooltip>
        <SlTooltip content="Align Center">
          <SlButton>
            <SlIcon name="bars-3"></SlIcon>
          </SlButton>
        </SlTooltip>
        <SlTooltip content="Align Right">
          <SlButton>
            <SlIcon name="bars-3-bottom-right"></SlIcon>
          </SlButton>
        </SlTooltip>
      </SlButtonGroup>
    </div>

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/button-group/button-group.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/button-group/button-group.js';

To import this component using a bundler: 

import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';

To import this component as a React component: 

import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';

Slots

Name Description
(default) One or more <sl-button> elements to display in the button group.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label A label to use for the button group. This won’t be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.