Segmented Button

Material Components Web docs (opens new window)

Usage

Multi select

<mdc-segmented-button>
  <mdc-segmented-button-segment>
    Sample Text
  </mdc-segmented-button-segment>
  <mdc-segmented-button-segment icon="favorite">
    Sample Text
  </mdc-segmented-button-segment>
</mdc-segmented-button>

Single select

<mdc-segmented-button single-select>
  <mdc-segmented-button-segment>
    Conditional Segment
  </mdc-segmented-button-segment>
  <mdc-segmented-button-segment>
    Sample Text
  </mdc-segmented-button-segment>
  <mdc-segmented-button-segment icon="favorite">
    Sample Text
  </mdc-segmented-button-segment>
</mdc-segmented-button>

mdc-segmented-button

Props

Name	Type	Default	Description
singleSelect	boolean	false
value	number | number[]	The index(es) of the selected segments. For single select segmented buttons, the value must be a number. For multi select segmented buttons, the value must be an array of numbers.

Slots

Name	Description
default

mdc-segmented-button-segment

Props

Name	Type	Default	Description
icon	string	null	The icon rendered.
label	string	null
rippleDisabled	boolean	false	Disable the ripple.