1. Base
  2. Outline
  3. Upper
  4. Custom

Base

Default   Success   Error   Warning   Focus   Black   Inverted 
<span class="mi-badge">Default</span>
<span class="mi-badge mi-badge-success">Success</span>
<span class="mi-badge mi-badge-error">Error</span>
<span class="mi-badge mi-badge-warning">Warning</span>
<span class="mi-badge mi-badge-focus">Focus</span>
<span class="mi-badge mi-badge-black">Black</span>
<span class="mi-badge mi-badge-inverted">inverted</span>

Outline

Default   Success   Error   Warning   Focus   Black   Inverted 
<span class="mi-badge mi-badge-outline">Default</span>
<span class="mi-badge mi-badge-success mi-badge-outline">Success</span>
<span class="mi-badge mi-badge-error mi-badge-outline">Error</span>
<span class="mi-badge mi-badge-warning mi-badge-outline">Warning</span>
<span class="mi-badge mi-badge-focus mi-badge-outline">Focus</span>
<span class="mi-badge mi-badge-black mi-badge-outline">Black</span>
<span class="mi-badge mi-badge-inverted mi-badge-outline">inverted</span>

Upper

Default   Success   Error   Warning   Focus   Black   Inverted 
<span class="mi-badge mi-badge-upper">Default</span>
<span class="mi-badge mi-badge-success mi-badge-upper">Success</span>
<span class="mi-badge mi-badge-error mi-badge-upper">Error</span>
<span class="mi-badge mi-badge-warning mi-badge-upper">Warning</span>
<span class="mi-badge mi-badge-focus mi-badge-upper">Focus</span>
<span class="mi-badge mi-badge-black mi-badge-upper">Black</span>
<span class="mi-badge mi-badge-inverted mi-badge-upper">Inverted</span>

Custom

You can use mixins to customize your labels and badges.

Label   1 
<!-- scss -->
.mi-badge.mi-badge-custom {
    // $text-color, $back-color
    @include label(#fff, #ea48a7);
}

<!-- html -->
<span class="mi-badge mi-badge-custom">Label</span>
<span class="mi-badge mi-badge-custom">1</span>
<span class="mi-badge mi-badge-tag mi-badge-custom">Tag</span>