Segmented control


Import the settings and the segemented-control scss files.

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


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>
<button type="button" size="s" class="mc-segmented-control__segment">
<span class="mc-segmented-control__content">
<span class="mc-segmented-control__label">Label</span>



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.