Segmented buttons

Standard

format_align_right

format_align_center

format_align_left

<mc-segmented-button-set>
  <mc-segmented-button checked value="1">
    <mc-icon>format_align_right</mc-icon>
  </mc-segmented-button>
  <mc-segmented-button value="2">
    <mc-icon>format_align_center</mc-icon>
  </mc-segmented-button>
  <mc-segmented-button value="3">
    <mc-icon>format_align_left</mc-icon>
  </mc-segmented-button>
</mc-segmented-button-set>

Add check icon

One

Two

Three

<mc-segmented-button-set check-icon>
  <mc-segmented-button checked value="one">One</mc-segmented-button>
  <mc-segmented-button value="two">Two</mc-segmented-button>
  <mc-segmented-button value="three">Three</mc-segmented-button>
</mc-segmented-button-set>

Multiple select

One

Two

Three

<mc-segmented-button-set id="multi-select" multiple>
  <mc-segmented-button checked value="one">One</mc-segmented-button>
  <mc-segmented-button checked value="two">Two</mc-segmented-button>
  <mc-segmented-button value="three">Three</mc-segmented-button>
</mc-segmented-button-set>

console.log(document.querySelector('#multi-select').value); // "one,two"

Style

CSS variables that allow you override default values

/* Optional variables for overriding */

--mc-segmented-button-text-color: var(--mc-on-surface);
--mc-segmented-button-icon-color: var(--mc-primary);
--mc-segmented-button-selected-container-color: var(--mc-secondary-container);
--mc-segmented-button-selected-text-color: var(--mc-on-secondary-container);