Badge

figma:ready

react:ready

scss:ready

vue:ready

webComponent:ready

Import

Import the settings and the badge scss files.


@import 'settings-tools/all-settings';
@import 'components/c.badge';

To create a badge you have one main class to apply mc-badge.


<div class="mc-badge">Badge label</div>

example :


<div class="mc-badge">Badge info</div>
<div class="mc-badge mc-badge--success">Badge success</div>

In case you need to create a new badge theme you'll need to define a new SASS map, see below :


$my-map: (
  'color-theme': (
    'background': white,
    'border': blue,
    'text': red,
  ),
);

Once the map of your theme is defined you can use the mixin set-badge-theme.


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

Then, it will generate something like this :


.mc-badge--my-custom-theme {
  color: red;
  border: 1px solid blue;
  background-color: white;
}