Segmented buttons

Segmented buttons help people select options, switch views, or sort elements

Material Design Guidelines: 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);