Buttons

Import

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.

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

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 :

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;

Responsive classes

breakpoint	mc-button--s	mc-button--m	mc-button--l
From breakpoint m	mc-button--s@from-m	mc-button--m@from-m	mc-button--l@from-m
From breakpoint l	mc-button--s@from-l	mc-button--m@from-l	mc-button--l@from-l
From breakpoint xl	mc-button--s@from-xl	mc-button--m@from-xl	mc-button--l@from-xl
From breakpoint xxl	mc-button--s@from-xxl	mc-button--m@from-xxl	mc-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

Responsive classes

breakpoint	mc-button--full	mc-button--fit
From breakpoint m	mc-button--full@from-m	mc-button--fit@from-m
From breakpoint l	mc-button--full@from-l	mc-button--fit@from-l
From breakpoint xl	mc-button--full@from-xl	mc-button--fit@from-xl
From breakpoint xxl	mc-button--full@from-xxl	mc-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.

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 size	Icon only	Icon + text
Small	1.5mu (24px)	1.5mu (24px)
Medium	2mu (32px)	1.5mu (24px)
Large	2mu (32px)	2mu (32px)

Icon and text

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.

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.

Behaviors

Standard button states :

• hover
• active
• focus
• disabled

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.

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

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

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 :

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 :

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

Then, it will generate something like this :