Segmented Button Group

Segmented buttons help people select options, switch views, or sort elements. They follow the Material Design 3 specification.

Use multi-select to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).

Overview

API

Usage

Day

Week

Month


  <wc-segmented-button-group>
    <wc-segmented-button value="day">Day</wc-segmented-button>
    <wc-segmented-button value="week" selected="true">Week</wc-segmented-button>
    <wc-segmented-button value="month">Month</wc-segmented-button>
  </wc-segmented-button-group>

Single Select

In single-select mode (default), only one segment can be active at a time. Clicking the active segment has no effect unless nullable is set.

Songs

Albums

Podcasts


  <wc-segmented-button-group>
    <wc-segmented-button value="songs">Songs</wc-segmented-button>
    <wc-segmented-button value="albums" selected="true">Albums</wc-segmented-button>
    <wc-segmented-button value="podcasts">Podcasts</wc-segmented-button>
  </wc-segmented-button-group>

Map

Satellite

Terrain


  <wc-segmented-button-group nullable="true">
    <wc-segmented-button value="map">Map</wc-segmented-button>
    <wc-segmented-button value="satellite">Satellite</wc-segmented-button>
    <wc-segmented-button value="terrain">Terrain</wc-segmented-button>
  </wc-segmented-button-group>

Multi Select

In multi-select mode, multiple segments can be active simultaneously. Add the multi-select attribute to the group to enable this behaviour.

Bold

Italic

Underline


  <wc-segmented-button-group multi-select="true">
    <wc-segmented-button value="bold" selected="true">Bold</wc-segmented-button>
    <wc-segmented-button value="italic">Italic</wc-segmented-button>
    <wc-segmented-button value="underline" selected="true">Underline</wc-segmented-button>
  </wc-segmented-button-group>

Wi-Fi

Bluetooth

NFC


  <wc-segmented-button-group multi-select="true">
    <wc-segmented-button value="wifi">Wi-Fi</wc-segmented-button>
    <wc-segmented-button value="bluetooth" selected="true">Bluetooth</wc-segmented-button>
    <wc-segmented-button value="nfc">NFC</wc-segmented-button>
  </wc-segmented-button-group>

With Icons

Segments can include an icon alongside the label. When selected, the icon is replaced by a checkmark to indicate the active state.

List

Grid

Table


  <wc-segmented-button-group>
    <wc-segmented-button value="list" icon="list">List</wc-segmented-button>
    <wc-segmented-button value="grid" icon="grid_view" selected="true">Grid</wc-segmented-button>
    <wc-segmented-button value="table" icon="table_chart">Table</wc-segmented-button>
  </wc-segmented-button-group>

Day