Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/segmented-button/style.css');

Variants

Default

Default segmented button styling.

<div class="segmented-button" style="min-width: 400px">
  <input type="radio" name="option" value="option-1" id="option-1"checked/>
  <label class="segmented-option" for="option-1">Option 1</label>
  <input type="radio" name="option" value="option-2" id="option-2" />
  <label class="segmented-option" for="option-2">Option 2</label>
  <input type="radio" name="option" value="option-3" id="option-3" />
  <label class="segmented-option" for="option-3">Option 3</label>
</div>

Icon

Segmented buttons with icons.

<div class="segmented-button" style="min-width: 400px">
  <input type="radio" name="sb-icon" value="sb-icon-1" id="sb-icon-1" checked/>
  <label class="segmented-option" for="sb-icon-1">
    <i class="material-icons">info</i>
    <span>Edit</span>
  </label>
  <input type="radio" name="sb-icon" value="sb-icon-2" id="sb-icon-2" />
  <label class="segmented-option" for="sb-icon-2">
    <i class="material-icons">info</i>
    <span>Preview</span>
  </label>
  <input type="radio" name="sb-icon" value="sb-icon-3" id="sb-icon-3" />
  <label class="segmented-option" for="sb-icon-3">
    <i class="material-icons">info</i>
    <span>Split</span>
  </label>
</div>

Multi Select

Segmented buttons with multi select.

<div class="segmented-button" style="min-width: 400px">
  <input id="one" type="checkbox" checked />
  <label class="segmented-option" for="one">One</label>
  <input id="two" type="checkbox" />
  <label class="segmented-option" for="two">Two</label>
  <input id="three" type="checkbox" />
  <label class="segmented-option" for="three">Three</label>
</div>

Multi Select Icon

Segmented buttons with multi select and icons.

<div class="segmented-button" style="min-width: 400px">
  <input id="cut" type="checkbox" checked />
  <label class="segmented-option" for="cut">
    <i class="material-icons">content_cut</i>
    <span>Cut</span>
  </label>
  <input id="paste" type="checkbox" />
  <label class="segmented-option" for="paste">
    <i class="material-icons">content_paste</i>
    <span>Paste</span>
  </label>
</div>

Design Tokens

Resources

• MDN
• Material Design