Button Group

Group a series of buttons together on a single line with the button group, and super-power.
Overview API

Usage

Here are several predefined button styles, each serving its own semantic purpose.

Label Label Label Label Label Label 


  <div class="demo-stack">
    <wc-button-group connected="true">
      <wc-button toggle="true">
        <wc-icon slot="icon" name="star"></wc-icon>
        Label
      </wc-button>
      <wc-button toggle="true">
        <wc-icon slot="icon" name="star"></wc-icon>
        Label
      </wc-button>
      <wc-button toggle="true">
        <wc-icon slot="icon" name="star"></wc-icon>
        Label
      </wc-button>
    </wc-button-group>

  <wc-button-group>
    <wc-button toggle="true" selected="true">
      <wc-icon slot="icon" name="star"></wc-icon>
      Label
    </wc-button>
    <wc-button toggle="true">
      <wc-icon slot="icon" name="star"></wc-icon>
      Label
    </wc-button>
    <wc-button toggle="true">
      <wc-icon slot="icon" name="star"></wc-icon>
      Label
    </wc-button>
  </wc-button-group>

  </div>

Variants

The button group supports two layout variants: standard (buttons with a gap) and connected (buttons with a 2px gap; outer buttons have fully rounded outer corners, middle buttons keep standard rounded corners).

Standard — buttons are independent with a visible gap between them.

First Second Third 

  <wc-button-group>
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

Connected — buttons share a 2px gap; outer buttons have fully rounded outer corners and middle buttons use standard rounded corners.

First Second Third 

  <wc-button-group connected="true">
    <wc-button toggle="true">First</wc-button>
    <wc-button toggle="true">Second</wc-button>
    <wc-button toggle="true">Third</wc-button>
  </wc-button-group>

Connected variant also works with icon buttons.

 

  <wc-button-group connected="true">
    <wc-icon-button toggle="true"><wc-icon name="format_bold"></wc-icon></wc-icon-button>
    <wc-icon-button toggle="true"><wc-icon name="format_italic"></wc-icon></wc-icon-button>
    <wc-icon-button toggle="true"><wc-icon name="format_underlined"></wc-icon></wc-icon-button>
  </wc-button-group>

Colors

Use the button-variant attribute to apply a consistent visual style to all buttons in the group: filled, tonal, or outlined.

Filled

First Second Third First Second Third First Second Third First Second Third First Second Third First Second Third 

  <wc-button-group variant="filled" color="primary">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

  <wc-button-group variant="tonal" color="primary">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

  <wc-button-group variant="outlined" color="primary">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

  <wc-button-group connected="true" variant="filled" color="primary">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

  <wc-button-group connected="true" variant="tonal" color="primary">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

  <wc-button-group connected="true" variant="outlined" color="primary">
    <wc-button toggle="true">First</wc-button>
    <wc-button toggle="true">Second</wc-button>
    <wc-button toggle="true">Third</wc-button>
  </wc-button-group>

Tonal

Outlined

Combine button-variant with variant="connected" for a connected group with a shared visual style.

Apply different colors using the color attribute.

Save Cancel Delete Archive 

  <wc-button-group variant="filled" color="success">
    <wc-button>Save</wc-button>
    <wc-button>Cancel</wc-button>
  </wc-button-group>
  <wc-button-group variant="filled" color="danger">
    <wc-button>Delete</wc-button>
    <wc-button>Archive</wc-button>
  </wc-button-group>

On this page

  • Usage
  • Variants
  • Colors
Sponsor

Properties

Events

Methods

CSS Custom Properties