Segmented control

Import

Import the settings and the segemented-control scss files.


@import 'settings/all-settings';
@import 'components/c.segmented-control';

Usage

The creation of an Segmented control component in your code is done using the following HTML structure:


<div class="mc-segmented-control">
  <button type="button" class="mc-segmented-control__segment is-active">
    <span class="mc-segmented-control__content">
      <span class="mc-segmented-control__icon"></span>
      <span class="mc-segmented-control__label"> Label </span>
    </span>
  </button>
  <button type="button" size="s" class="mc-segmented-control__segment">
    <span class="mc-segmented-control__content">
      <span class="mc-segmented-control__label">Label</span>
    </span>
  </button>
</div>

Variations

Sizes

You have two sizes available for the segmented-control

For this you have to use the modifier mc-segmented-control--m on the main div.

Full width

To display segmented-control in full width, you have to add the modifier mc-segmented-control--full on the main div.