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 
        
  <wfc-segmented-button-set>
    <wfc-segmented-button checked value="1">
      <wfc-icon>format_align_right</wfc-icon>
    </wfc-segmented-button>
    <wfc-segmented-button value="2">
      <wfc-icon>format_align_center</wfc-icon>
    </wfc-segmented-button>
    <wfc-segmented-button value="3">
      <wfc-icon>format_align_left</wfc-icon>
    </wfc-segmented-button>
  </wfc-segmented-button-set>
No checkmarks
One Two Three 
        
  <wfc-segmented-button-set>
    <wfc-segmented-button no-checkmark checked value="one">One</wfc-segmented-button>
    <wfc-segmented-button no-checkmark value="two">Two</wfc-segmented-button>
    <wfc-segmented-button no-checkmark value="three">Three</wfc-segmented-button>
  </wfc-segmented-button-set>
Multiple select
One Two Three 
        
  <wfc-segmented-button-set id="multi-select" multiple>
    <wfc-segmented-button checked value="one">One</wfc-segmented-button>
    <wfc-segmented-button checked value="two">Two</wfc-segmented-button>
    <wfc-segmented-button value="three">Three</wfc-segmented-button>
  </wfc-segmented-button-set>
        
      
        
  console.log(document.querySelector('#multi-select').value); // "one,two"