Button Group beta

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

Basic button group

<ch-button-group>
  <ch-button>Left</ch-button>
  <ch-button>Center</ch-button>
  <ch-button>Right</ch-button>
</ch-button-group>

Dropdowns in button groups

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

<ch-button-group>
  <ch-button>Button</ch-button>
  <ch-button>Button</ch-button>
  <ch-menu style="--popup-z-index: 1;">
    <ch-button slot="trigger">Dropdown</ch-button>
    <ch-menu-item>Item 1</ch-menu-item>
    <ch-menu-item>Item 2</ch-menu-item>
    <ch-menu-item>Item 3</ch-menu-item>
  </ch-menu>
</ch-button-group>

Vertical button groups

The vertical attribute can be used to create a vertical button group.

<ch-button-group vertical>
  <ch-button>Button</ch-button>
  <ch-button>Button</ch-button>
  <ch-menu style="--popup-z-index: 1;">
    <ch-button slot="trigger">Dropdown</ch-button>
    <ch-menu-item>Item 1</ch-menu-item>
    <ch-menu-item>Item 2</ch-menu-item>
    <ch-menu-item>Item 3</ch-menu-item>
  </ch-menu>
</ch-button-group>

Split button groups

The split attribute can be used to create a split button group, styled as a single button with multiple actions.

<ch-button-group split>
  <ch-button>Button</ch-button>
  <ch-button>Button</ch-button>
  <ch-menu style="--popup-z-index: 1;">
    <ch-button slot="trigger">Dropdown</ch-button>
    <ch-menu-item>Item 1</ch-menu-item>
    <ch-menu-item>Item 2</ch-menu-item>
    <ch-menu-item>Item 3</ch-menu-item>
  </ch-menu>
</ch-button-group>

Toolbar button groups

The toolbar attribute can be used to cause the button group to function as a toolbar.

<ch-button-group toolbar>
  <ch-button>Button</ch-button>
  <ch-button>Button</ch-button>
  <ch-button>Button</ch-button>
</ch-button-group>

Button group with select

The select attribute can be set to “single” to allow the selection of a single button, or “multiple” for multiple selections.

<ch-button-group select="single" style="--button-pressed-bg-color: var(--button-active-bg-color);">
  <ch-button>Select Single</ch-button>
  <ch-button>Select Single</ch-button>
  <ch-button>Select Single</ch-button>
</ch-button-group>

<ch-button-group
  select="multiple"
  style="--button-pressed-bg-color: var(--button-active-bg-color);"
>
  <ch-button>Select Multiple</ch-button>
  <ch-button>Select Multiple</ch-button>
  <ch-button>Select Multiple</ch-button>
</ch-button-group>

API