Button Group

Usage

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



  <div class="demo-stack" data-astro-cid-mizbpknb>
  <wc-button-group variant="connected" data-astro-cid-mizbpknb="true">
    <wc-icon-button toggle="true" selected="true" data-astro-cid-mizbpknb="true"><wc-icon name="home" data-astro-cid-mizbpknb="true"></wc-icon></wc-icon-button>
    <wc-icon-button toggle="true" data-astro-cid-mizbpknb="true"><wc-icon name="alarm" data-astro-cid-mizbpknb="true"></wc-icon></wc-icon-button>
    <wc-icon-button toggle="true" data-astro-cid-mizbpknb="true"><wc-icon name="box" data-astro-cid-mizbpknb="true"></wc-icon></wc-icon-button>
  </wc-button-group>

  <wc-button-group data-astro-cid-mizbpknb="true">
    <wc-icon-button data-astro-cid-mizbpknb="true"><wc-icon name="home" data-astro-cid-mizbpknb="true"></wc-icon></wc-icon-button>
    <wc-icon-button data-astro-cid-mizbpknb="true"><wc-icon name="alarm" data-astro-cid-mizbpknb="true"></wc-icon></wc-icon-button>
    <wc-icon-button data-astro-cid-mizbpknb="true"><wc-icon name="box" data-astro-cid-mizbpknb="true"></wc-icon></wc-icon-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 variant="standard">
    <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 variant="connected">
    <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 variant="connected">
    <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>

Orientation — use the orientation attribute to stack buttons vertically.

First

Second

Third


  <wc-button-group orientation="vertical">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-button>
  </wc-button-group>

Connected + vertical — outer buttons have rounded top/bottom corners, middle buttons keep standard shape.

First

Second

Third


  <wc-button-group variant="connected" orientation="vertical">
    <wc-button>First</wc-button>
    <wc-button>Second</wc-button>
    <wc-button>Third</wc-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


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

Tonal

First

Second

Third


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

Outlined

First

Second

Third


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

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

First

Second

Third


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

First

Second

Third


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

First

Second

Third


  <wc-button-group variant="connected" button-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>

Apply different colors using the color attribute.

Save

Cancel

Delete

Usage

Variants

Colors

Properties

Events

Methods

CSS Custom Properties