1. Primary
  2. Secondary
  3. Outline
  4. Disabled
  5. Small
  6. Big
  7. Large
  8. Upper
  9. Round
  10. Inverted
  11. Width
  12. Icons
  13. Custom

Primary

Button 

<button class="mi-button">Button</button>
<a href="#" class="mi-button">Button</a>

Secondary

Button 

<button class="mi-button mi-button-secondary">Button</button>
<a href="#" class="mi-button mi-button-secondary">Button</a>

Outline

<button class="mi-button mi-button-outline">Button</button>
<button class="mi-button mi-button-secondary mi-button-outline">Button</button>

Disabled

Link 

<a href="#" class="mi-button mi-button-disabled" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary" disabled>Button</button>

Small

Buttons come in all sizes and shapes.

Link 

<a href="#" class="mi-button mi-button-small" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary mi-button-small">Button</button>

Big

Link 

<a href="#" class="mi-button mi-button-big" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary mi-button-big">Button</button>

Large

Link 

<a href="#" class="mi-button mi-button-large" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary mi-button-large">Button</button>

Upper

Link Link 

<a href="#" class="mi-button upper" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary upper">Button</button>
<a href="#" class="mi-button upper mi-button-outline" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary upper mi-button-outline">Button</button>

Round

Link Link 

<a href="#" class="mi-button round" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary round">Button</button>
<a href="#" class="mi-button round mi-button-outline" role="mi-button">Link</a>
<button class="mi-button mi-button-secondary round mi-button-outline">Button</button>

Inverted

For use on darker backgrounds, you can just introduce inverted class to have your button flip its color to the opposite one.

Link     

<a href="#" class="mi-button mi-button-inverted" role="mi-button">Link</a>
<button class="mi-button mi-button-inverted mi-button-outline">Button</button>

Width

<button class="mi-button mi-w100">...</button>
<button class="mi-button mi-button-secondary mi-w50">...</button>

Icons

<button class="mi-button"><i class="mikit-calendar"></i></button>
<button class="mi-button mi-button-secondary"><i class="mikit-calendar"></i> Change</button>

<button class="mi-button mi-button-outline"><i class="mikit-search"></i></button>
<button class="mi-button mi-button-secondary mi-button-outline"><i class="mikit-search"></i> Search</button>

Custom

With some Sass magic, you can customize your buttons in a snap. Just include a color class declaration and set the color itself, and you're done.

// scss
.mi-button.mi-button-red {
    // $text-color, $back-color
    @include button(#fff, #ff3366);
}

// html
<button class="mi-button mi-button-red">Button</button>
<button class="mi-button mi-button-red mi-button-outline">Button</button>