Light Dark System

Button Group

<sc-button-group> | ScButtonGroup
Since 2.0 stable

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

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';

const App = () => (
  <ScButtonGroup label="Alignment">
    <ScButton>Left</ScButton>
    <ScButton>Center</ScButton>
    <ScButton>Right</ScButton>
  </ScButtonGroup>
);

Examples

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 
<sc-button-group label="Alignment">
  <sc-button size="small">Left</sc-button>
  <sc-button size="small">Center</sc-button>
  <sc-button size="small">Right</sc-button>
</sc-button-group>

<br /><br />

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

<br /><br />

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';

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

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton size="medium">Left</ScButton>
      <ScButton size="medium">Center</ScButton>
      <ScButton size="medium">Right</ScButton>
    </ScButtonGroup>

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton size="large">Left</ScButton>
      <ScButton size="large">Center</ScButton>
      <ScButton size="large">Right</ScButton>
    </ScButtonGroup>
  </>
);

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 
<sc-button-group label="Alignment">
  <sc-button variant="primary">Left</sc-button>
  <sc-button variant="primary">Center</sc-button>
  <sc-button variant="primary">Right</sc-button>
</sc-button-group>

<br /><br />

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

<br /><br />

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

<br /><br />

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

<br /><br />

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';

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

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton variant="success">Left</ScButton>
      <ScButton variant="success">Center</ScButton>
      <ScButton variant="success">Right</ScButton>
    </ScButtonGroup>

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton variant="neutral">Left</ScButton>
      <ScButton variant="neutral">Center</ScButton>
      <ScButton variant="neutral">Right</ScButton>
    </ScButtonGroup>

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton variant="warning">Left</ScButton>
      <ScButton variant="warning">Center</ScButton>
      <ScButton variant="warning">Right</ScButton>
    </ScButtonGroup>

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton variant="danger">Left</ScButton>
      <ScButton variant="danger">Center</ScButton>
      <ScButton variant="danger">Right</ScButton>
    </ScButtonGroup>
  </>
);

Pill Buttons

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

Left Center Right

Left Center Right

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

<br /><br />

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

<br /><br />

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';

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

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton size="medium" pill>
        Left
      </ScButton>
      <ScButton size="medium" pill>
        Center
      </ScButton>
      <ScButton size="medium" pill>
        Right
      </ScButton>
    </ScButtonGroup>

    <br />
    <br />

    <ScButtonGroup label="Alignment">
      <ScButton size="large" pill>
        Left
      </ScButton>
      <ScButton size="large" pill>
        Center
      </ScButton>
      <ScButton size="large" pill>
        Right
      </ScButton>
    </ScButtonGroup>
  </>
);

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

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';
import ScDropdown from '@styledc-dev/styledc/dist/react/dropdown';
import ScMenu from '@styledc-dev/styledc/dist/react/menu';
import ScMenuItem from '@styledc-dev/styledc/dist/react/menu-item';

const App = () => (
  <ScButtonGroup label="Example Button Group">
    <ScButton>Button</ScButton>
    <ScButton>Button</ScButton>
    <ScDropdown>
      <ScButton slot="trigger" caret>
        Dropdown
      </ScButton>
      <ScMenu>
        <ScMenuItem>Item 1</ScMenuItem>
        <ScMenuItem>Item 2</ScMenuItem>
        <ScMenuItem>Item 3</ScMenuItem>
      </ScMenu>
    </ScDropdown>
  </ScButtonGroup>
);

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.

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';
import ScDropdown from '@styledc-dev/styledc/dist/react/dropdown';
import ScMenu from '@styledc-dev/styledc/dist/react/menu';
import ScMenuItem from '@styledc-dev/styledc/dist/react/menu-item';

const App = () => (
  <ScButtonGroup label="Example Button Group">
    <ScButton variant="primary">Save</ScButton>
    <ScDropdown placement="bottom-end">
      <ScButton slot="trigger" variant="primary" caret></ScButton>
      <ScMenu>
        <ScMenuItem>Save</ScMenuItem>
        <ScMenuItem>Save as&hellip;</ScMenuItem>
        <ScMenuItem>Save all</ScMenuItem>
      </ScMenu>
    </ScDropdown>
  </ScButtonGroup>
);

Tooltips in Button Groups

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

Left Center Right 
<sc-button-group label="Alignment">
  <sc-tooltip content="I'm on the left">
    <sc-button>Left</sc-button>
  </sc-tooltip>

  <sc-tooltip content="I'm in the middle">
    <sc-button>Center</sc-button>
  </sc-tooltip>

  <sc-tooltip content="I'm on the right">
    <sc-button>Right</sc-button>
  </sc-tooltip>
</sc-button-group>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => (
  <>
    <ScButtonGroup label="Alignment">
      <ScTooltip content="I'm on the left">
        <ScButton>Left</ScButton>
      </ScTooltip>

      <ScTooltip content="I'm in the middle">
        <ScButton>Center</ScButton>
      </ScTooltip>

      <ScTooltip content="I'm on the right">
        <ScButton>Right</ScButton>
      </ScTooltip>
    </ScButtonGroup>
  </>
);

Toolbar Example

Create interactive toolbars with button groups.

<div class="button-group-toolbar">
  <sc-button-group label="History">
    <sc-tooltip content="Undo">
      <sc-button><sc-icon name="arrow-counterclockwise" label="Undo"></sc-icon></sc-button>
    </sc-tooltip>
    <sc-tooltip content="Redo">
      <sc-button><sc-icon name="arrow-clockwise" label="Redo"></sc-icon></sc-button>
    </sc-tooltip>
  </sc-button-group>

  <sc-button-group label="Formatting">
    <sc-tooltip content="Bold">
      <sc-button><sc-icon name="type-bold" label="Bold"></sc-icon></sc-button>
    </sc-tooltip>
    <sc-tooltip content="Italic">
      <sc-button><sc-icon name="type-italic" label="Italic"></sc-icon></sc-button>
    </sc-tooltip>
    <sc-tooltip content="Underline">
      <sc-button><sc-icon name="type-underline" label="Underline"></sc-icon></sc-button>
    </sc-tooltip>
  </sc-button-group>

  <sc-button-group label="Alignment">
    <sc-tooltip content="Align Left">
      <sc-button><sc-icon name="justify-left" label="Align Left"></sc-icon></sc-button>
    </sc-tooltip>
    <sc-tooltip content="Align Center">
      <sc-button><sc-icon name="justify" label="Align Center"></sc-icon></sc-button>
    </sc-tooltip>
    <sc-tooltip content="Align Right">
      <sc-button><sc-icon name="justify-right" label="Align Right"></sc-icon></sc-button>
    </sc-tooltip>
  </sc-button-group>
</div>

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

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';
import ScIcon from '@styledc-dev/styledc/dist/react/icon';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

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

const App = () => (
  <>
    <div className="button-group-toolbar">
      <ScButtonGroup label="History">
        <ScTooltip content="Undo">
          <ScButton>
            <ScIcon name="arrow-counterclockwise"></ScIcon>
          </ScButton>
        </ScTooltip>
        <ScTooltip content="Redo">
          <ScButton>
            <ScIcon name="arrow-clockwise"></ScIcon>
          </ScButton>
        </ScTooltip>
      </ScButtonGroup>

      <ScButtonGroup label="Formatting">
        <ScTooltip content="Bold">
          <ScButton>
            <ScIcon name="type-bold"></ScIcon>
          </ScButton>
        </ScTooltip>
        <ScTooltip content="Italic">
          <ScButton>
            <ScIcon name="type-italic"></ScIcon>
          </ScButton>
        </ScTooltip>
        <ScTooltip content="Underline">
          <ScButton>
            <ScIcon name="type-underline"></ScIcon>
          </ScButton>
        </ScTooltip>
      </ScButtonGroup>

      <ScButtonGroup label="Alignment">
        <ScTooltip content="Align Left">
          <ScButton>
            <ScIcon name="justify-left"></ScIcon>
          </ScButton>
        </ScTooltip>
        <ScTooltip content="Align Center">
          <ScButton>
            <ScIcon name="justify"></ScIcon>
          </ScButton>
        </ScTooltip>
        <ScTooltip content="Align Right">
          <ScButton>
            <ScIcon name="justify-right"></ScIcon>
          </ScButton>
        </ScTooltip>
      </ScButtonGroup>
    </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/@styledc-dev/styledc@1.0.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/@styledc-dev/styledc@1.0.0/cdn/components/button-group/button-group.js';

To import this component using a bundler:

import '@styledc-dev/styledc/dist/components/button-group/button-group.js';

To import this component as a React component:

import ScButtonGroup from '@styledc-dev/styledc/dist/react/button-group';

Slots

Name Description
(default) One or more <sc-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.