Components

Buttons

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
:Ready
webComponent
:Ready
Usage
Code
Specs
Accessibility

Import

@import 'settings-tools/all-settings';


@import 'components/_c.button';

Basic usage

To create a solid button you have one main class to apply mc-button, and wrap the text inside the button in a span.mc-button__label. While the text without span will look mostly fine, we use it to opticaly align the characters baseline in the button. With unwraped text, buttons using icons will break layout.

<button type="button" class="mc-button">
  <span class="mc-button__label"> Label </span>
</button>

Note that if you wish, you can also use the mc-button with an HTML tag <a />:

<a href="#" class="mc-button">
  <span class="mc-button__label"> Label </span>
</a>
Viewport: px 
<div class="example">
  <button type="button" class="mc-button">
    <span class="mc-button__label">
      Primary button
    </span>
  </button>
</div>

Variations

Available themes

  • solid
  • bordered
  • bordered-neutral
  • solid-neutral
  • solid-primary-02 (no longer maintened)
  • bordered-primary-02 (no longer maintened)
  • solid-danger
  • bordered-danger

example :

<a href="#" class="mc-button mc-button--neutral">
  <span class="mc-button__label"> Label </span>
</a>
<a href="#" class="mc-button mc-button--bordered-neutral">
  <span class="mc-button__label"> Label </span>
</a>
Viewport: px 
<div class="example">
  <button type="button" class="mc-button">
    <span class="mc-button__label"> Primary button </span>
  </button>
  <button type="button" class="mc-button mc-button--bordered">
    <span class="mc-button__label"> Primary bordered button </span>
  </button>
</div>
<div class="example">
  <button type="button" class="mc-button mc-button--solid-danger">
    <span class="mc-button__label"> Danger button </span>
  </button>
  <button type="button" class="mc-button mc-button--bordered-danger">
    <span class="mc-button__label"> Danger bordered button </span>
  </button>
</div>
<div class="example">
  <button type="button" class="mc-button mc-button--solid-neutral">
    <span class="mc-button__label"> Neutral button </span>
  </button>
  <button type="button" class="mc-button mc-button--bordered-neutral">
    <span class="mc-button__label"> Neutral bordered button </span>
  </button>
</div>

Available sizes

You can use one of the 3 available sizes :

  • small : mc-button--s
  • medium : this is the default style so you don't need to add a modifier class
  • large : mc-button--l;
<a href="#" class="mc-button mc-button--s">
  <span class="mc-button__label"> Label </span>
</a>
<a href="#" class="mc-button">
  <span class="mc-button__label"> Label </span>
</a>
<a href="#" class="mc-button mc-button--l">
  <span class="mc-button__label"> Label </span>
</a>
Viewport: px 
<div class="example">
  <button type="button" class="mc-button mc-button--s">
    <span class="mc-button__label">
      Small button
    </span>
  </button>
</div>
<div class="example">
  <button type="button" class="mc-button">
    <span class="mc-button__label">
      Medium button
    </span>
  </button>
</div>
<div class="example">
  <button type="button" class="mc-button mc-button--l">
    <span class="mc-button__label">
      Large button
    </span>
  </button>
</div>

Responsive classes

breakpointmc-button--smc-button--mmc-button--l
From breakpoint mmc-button--s@from-mmc-button--m@from-mmc-button--l@from-m
From breakpoint lmc-button--s@from-lmc-button--m@from-lmc-button--l@from-l
From breakpoint xlmc-button--s@from-xlmc-button--m@from-xlmc-button--l@from-xl
From breakpoint xxlmc-button--s@from-xxlmc-button--m@from-xxlmc-button--l@from-xxl

Width modifiers

To manage display of your button, you have 2 availables classes :

  • mc-button--fit : natural size (Applied by default)
  • mc-button--full : full width
<a href="#" class="mc-button mc-button--full">My button</a>
Viewport: px 
<div class="example">
  <div class="example__item">
    <button type="button" class="mc-button">
      <span class="mc-button__label">
        fit button
      </span>
    </button>
  </div>
  <div class="example__item">
    <button type="button" class="mc-button mc-button--full">
      <span class="mc-button__label">
        full width button
      </span>
    </button>
  </div>
  <div class="example__item">
    <button
      type="button"
      class="mc-button mc-button--full mc-button--fit@from-m"
    >
      <span class="mc-button__label">
        Full and Fit from screen m
      </span>
    </button>
  </div>
</div>

Responsive classes

breakpointmc-button--fullmc-button--fit
From breakpoint mmc-button--full@from-mmc-button--fit@from-m
From breakpoint lmc-button--full@from-lmc-button--fit@from-l
From breakpoint xlmc-button--full@from-xlmc-button--fit@from-xl
From breakpoint xxlmc-button--full@from-xxlmc-button--fit@from-xxl

Variations with icons

You can add an icon into any buttons you want.

You only need to add the mc-button__icon CSS class to your icon HTML tag.

<a href="#" class="mc-button">
  <span class="mc-button__label">Label</span>
  <svg class="mc-button__icon">
    <use xlink:href="#icon" />
  </svg>
</a>

Icon sizes

The size of the icons is relative to the size of the buttons and corresponds to the rules detailed in the table below:

Button sizeIcon onlyIcon + text
Small1.5mu (24px)1.5mu (24px)
Medium2mu (32px)1.5mu (24px)
Large2mu (32px)2mu (32px)

Icon and text

Viewport: px 
<div class="example">
  <button type="button" class="mc-button mc-button--s">
    <svg class="mc-button__icon">
      <use xlink:href="#icon" />
    </svg>
    <span class="mc-button__label">
      Small button with 1.5mu icon
    </span>
  </button>
</div>
<div class="example">
  <button type="button" class="mc-button">
    <svg class="mc-button__icon">
      <use xlink:href="#icon" />
    </svg>
    <span class="mc-button__label">
      Medium button with 1.5mu icon
    </span>
  </button>
</div>
<div class="example">
  <button type="button" class="mc-button mc-button--l">
    <svg class="mc-button__icon">
      <use xlink:href="#iconL" />
    </svg>
    <span class="mc-button__label">
      Large button with 2mu icon
    </span>
  </button>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon" viewBox="0 0 24 24">
    <path d="M18 16H8a1 1 0 01-1-.75L4.38 5H3a1 1 0 010-2h2.15a1 1 0 011 .75L6.71 6H20a1 1 0 01.79.38 1 1 0 01.18.86l-2 8A1 1 0 0118 16zm-9.2-2h8.42l1.5-6H7.23z"/>
    <circle cx="16.5" cy="20" r="2"/>
    <circle cx="9.5" cy="20" r="2"/>
  </symbol>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconL" viewBox="0 0 32 32">
    <path d="M22.41 21.3H11.57a2 2 0 01-1.93-1.48L6.15 7H4a1 1 0 010-2h2.15a2 2 0 011.93 1.48l.59 2.17h16.9a2 2 0 011.88 2.69L24.29 20a2 2 0 01-1.88 1.3zm-10.84-2h10.84l3.16-8.65H9.22zM12.75 25.18a.91.91 0 11-.91.91.91.91 0 01.91-.91m0-2a2.91 2.91 0 102.91 2.91 2.91 2.91 0 00-2.91-2.91zM21.17 25.18a.91.91 0 11-.91.91.91.91 0 01.91-.91m0-2a2.91 2.91 0 102.91 2.91 2.91 2.91 0 00-2.91-2.91z"/>
  </symbol>
</svg>

Icon only and square button

You can also use icon only without text into a square button.

To do that, you shoud add the mc-button--square modifier to the button to display it as a square.

<a href="#" class="mc-button mc-button--square">
  <svg class="mc-button__icon">
    <use xlink:href="#icon" />
  </svg>
</a>
Viewport: px 
<div class="example">
  <button type="button" class="mc-button mc-button--s mc-button--square">
    <svg class="mc-button__icon">
      <use xlink:href="#iconM" />
    </svg>
  </button>
  <button type="button" class="mc-button mc-button--m mc-button--square">
    <svg class="mc-button__icon">
      <use xlink:href="#iconL" />
    </svg>
  </button>
  <button type="button" class="mc-button mc-button--l mc-button--square">
    <svg class="mc-button__icon">
      <use xlink:href="#iconL" />
    </svg>
  </button>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconM" viewBox="0 0 24 24">
    <path
      d="M11.28 19.7l-7-7a5.32 5.32 0 0 1-1.58-3A5 5 0 0 1 8.36 4a5.37 5.37 0 0 1 3 1.57l.6.6.6-.6a5.31 5.31 0 0 1 3-1.57 5 5 0 0 1 4.21 1.43 5 5 0 0 1 1.43 4.21 5.32 5.32 0 0 1-1.58 3l-7 7a1 1 0 0 1-1.34.06zM7.71 6.05a3 3 0 0 0-2.11 5.08l6.4 6.4 6.4-6.4a3 3 0 0 0 0-4.21 3.06 3.06 0 0 0-4.21 0L12 9.11 9.81 6.92a3 3 0 0 0-2.1-.87z"
    />
  </symbol>
  <symbol id="iconL" viewBox="0 0 32 32">
    <path
      d="M17.41 26.09a2 2 0 0 1-2.82 0L5 16.5a6.8 6.8 0 0 1 .66-10.2 7 7 0 0 1 9.1.76L16 8.3l1.24-1.24a7 7 0 0 1 9.1-.76A6.8 6.8 0 0 1 27 16.5zM9.79 6.91a4.79 4.79 0 0 0-3.39 8.17l9.6 9.6 9.6-9.6a4.79 4.79 0 0 0-6.78-6.77L16 11.13l-2.82-2.82a4.8 4.8 0 0 0-3.39-1.4z"
    />
  </symbol>
</svg>

Icon position

When an icon is used in a button with text, it is possible to position the icon to the left or right of the text.

Viewport: px 
<div class="example">
  <button type="button" class="mc-button">
    <svg class="mc-button__icon">
      <use xlink:href="#icon" />
    </svg>
    <span class="mc-button__label">
      Icon on the left
    </span>
  </button>
  <button type="button" class="mc-button">
    <span class="mc-button__label">
      Icon on the right
    </span>
    <svg class="mc-button__icon">
      <use xlink:href="#icon" />
    </svg>
  </button>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon" viewBox="0 0 24 24">
    <path
      d="M17.13 16.57H8a1 1 0 0 1-1-.74L4.39 6H3a1 1 0 0 1 0-2h2.15a1 1 0 0 1 1 .74l.53 2H20A1 1 0 0 1 20.94 8l-2.87 7.87a1 1 0 0 1-.94.7zm-8.34-2h7.64l2.14-5.87H7.2z"
    />
    <circle cx="9.46" cy="19.85" r="2.15" />
    <circle cx="15.69" cy="19.85" r="2.15" />
  </symbol>
</svg>

Behaviors

Standard button states :

  • hover
  • active
  • focus
  • disabled
Viewport: px 
<div class="example">
  <div class="example__col">
    <h2>Hover</h2>
    <button type="button" class="mc-button mc-button--full is-hover">
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--bordered mc-button--full is-hover"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-neutral is-hover"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-neutral is-hover"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-danger is-hover"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-danger is-hover"
    >
      <span class="mc-button__label">Label</span>
    </button>
  </div>


  <div class="example__col">
    <h2>Active</h2>
    <button type="button" class="mc-button mc-button--full is-active">
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered is-active"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-neutral is-active"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-neutral is-active"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-danger is-active"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-danger is-active"
    >
      <span class="mc-button__label">Label</span>
    </button>
  </div>


  <div class="example__col">
    <h2>Focus</h2>
    <button type="button" class="is-focus mc-button--full mc-button">
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered is-focus"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-neutral is-focus"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-neutral is-focus"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-danger is-focus"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-danger is-focus"
    >
      <span class="mc-button__label">Label</span>
    </button>
  </div>


  <div class="example__col">
    <h2>Disabled</h2>
    <button type="button" class="mc-button mc-button--full is-disabled">
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered is-disabled"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-neutral is-disabled"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-neutral is-disabled"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--solid-danger is-disabled"
    >
      <span class="mc-button__label">Label</span>
    </button>
    <button
      type="button"
      class="mc-button mc-button--full mc-button--bordered-danger is-disabled"
    >
      <span class="mc-button__label">Label</span>
    </button>
  </div>
</div>

Customization and Mixins

Customize buttons using tokens

Our buttons themes are built by looping through the associated design tokens. This mean that you can override or create buttons themes and the associated classes names using only tokens.

Read first

Read our customization documentation first first to see how to customize tokens.

Create a json file in [your/src]/properties/color/button.json

You can override the existing themes by re-definiing an existing key :

{
  "color": {
    "button": {
      "danger": {
        "background": {
          "value": "{color.custom.500.value}"
        },
        "font": {
          "value": "{color.custom.000.value}"
        },
        "focus": {
          "border": {
            "value": "{color.custom.700.value}"
          }
        },
        ...etc
    }
  }
}

Which will change the apearence of the .mc-button--danger theme.

But you can also create an entierly new theme just by adding a new key :

{
  "color": {
    "button": {
      "foo-bar": {
        "background": {
          "value": "{color.custom.500.value}"
        },
        "font": {
          "value": "{color.custom.000.value}"
        },
        "focus": {
          "border": {
            "value": "{color.custom.700.value}"
          }
        },
        ...etc
    }
  }
}

Which will create the .mc-button--foo-bar theme and associated classes.

The button mixin

If you need to create a new button theme you need to define a new SASS map, see below :

$my-map: (
  'background': red,
  'font': green,
  'border': yellow,
  'hover': (
    'background': blue,
    'font': white,
  ),
  'focus': (
    'border': purple,
  ),
  'active': (
    'background': 'blue',
  ),
);

Now the map of your theme is define you can use the mixin set--button-theme.

.mc-button--my-custom-theme {
  @include set-button-theme($my-map);
}

Then, it will generate something like this :

.mc-button--my-custom-theme {
  color: green;
  border: 2px solid yellow;
  background-color: red;
}


.mc-button--my-custom-theme:hover,
.mc-button--my-custom-theme.is-hover {
  background-color: blue;
  color: white;
}


.mc-button--my-custom-theme:hover,
.mc-button--my-custom-theme.is-hover {
  background-color: blue;
  color: white;
}


.mc-button--my-custom-theme:focus,
.mc-button--my-custom-theme.is-focus {
  border-color: purple;
}