Button

.button class allows you to set quick and default button style.

Size

.button for default size button
.button-xs for small size button
.button-md for medium size button
.button-lg for large size button
<button class="button-xs">...</button>
<button class="button">...</button>
<button class="button-md">...</button>
<button class="button-lg">...</button>

Width

Use .full or .half class for 100% or 50% width. 
<button class="button half">...</button>
<button class="button full">...</button>

Color

To change the color of button change text color, background color and focus color

Don't forget to change the focused outline color. Use .focus-{color} class to change outline color. If don't want focus outline color than use .focus-none class

<!-- Solid Color -->
<button class="button bg-blue focus-blue">BLUE</button>
<button class="button bg-green focus-green">GREEN</button>
<button class="button bg-red focus-red">RED</button>
<button class="button bg-yellow focus-yellow">YELLOW</button>
<button class="button bg-indigo focus-indigo">INDIGO</button>
<button class="button bg-black focus-black">BLACK</button>

<!-- Light Color -->
<button class="button bg-blue-lightest blue focus-blue">BLUE</button>
<button class="button bg-green-lightest green focus-green">GREEN</button>
<button class="button bg-red-lightest red focus-red">RED</button>
<button class="button bg-yellow-lightest yellow-darker focus-yellow">YELLOW</button>
<button class="button bg-indigo-lightest indigo focus-indigo">INDIGO</button>
<button class="button bg-gray-lightest gray ">GRAY</button>

Border

To change the border color of button use .border-{color} class

<!-- Border Color -->
<button class="button bg-blue-lightest blue border-blue focus-blue">BLUE</button>
<button class="button bg-green-lightest green border-green focus-green">GREEN</button>
<button class="button bg-red-lightest red border-red focus-red">RED</button>
<button class="button bg-yellow-lightest yellow-darker border-yellow focus-yellow">YELLOW</button>
<button class="button bg-indigo-lightest indigo border-indigo focus-indigo">INDIGO</button>
<button class="button bg-gray-lightest border-gray gray ">GRAY</button>

Disabled

Just add disabled attribute to make button disable

<button class="button" disabled>...</button>

Loading

Use .loading class to set button in loading state. Loading icons inherits the color and size of button.

<button class="button loading">DEFAULT</button>
<button class="button-xs bg-blue white loading">BLUE</button>
<button class="button bg-blue white loading">BLUE</button>
<button class="button-md bg-blue white loading">BLUE</button>
<button class="button-lg bg-gray-lighter gray loading">Gray</button>

Round

To make border round use border radius shorthand .br-round

<button class="button br-round">...</button>
<button class="button br-0">...</button>
<button class="button br-6">...</button>

Icon

<button class="button">
    <ion-icon name="cart" size="small" class="mr-3"></ion-icon>
    <span>Checkout</span>
</button>

<button class="button bg-pink">
    <span class="input-icon">
        <ion-icon name="heart" size="small"></ion-icon>
    </span>
</button>

<button class="button">
    SEARCH
    <ion-icon name="search" size="small" class="ml-3"></ion-icon>
</button>

Shadow

Use shadow class to add .shadow. See shadow doc

<button class="button bg-blue white shadow-blue br-round focus-none">BLUE</button>
<button class="button bg-green white shadow-1-green br-round focus-none">GREEN</button>
<button class="button bg-red white shadow-2-red br-round focus-none">RED</button>
<button class="button bg-yellow white shadow-3-yellow br-round focus-none">YELLOW</button>
<button class="button bg-indigo white shadow-4-indigo br-round focus-none">INDIGO</button>
<button class="button bg-gray white shadow br-round focus-none">GRAY</button>

Gradient

Use .{start-color}-{end-color} to add two color liner gradient. See gradient background color doc

<button class="button orange-red white shadow-2-orange bw-0 focus-red">ORANGE RED</button>
<button class="button linear-blue white shadow-2-blue bw-0 focus-blue">LINEAR BLUE</button>
<button class="button linear-red white shadow-2-red bw-0 focus-red">LINEAR RED</button>

Hover

Default hover effect changes the opacity of button but you can change hover effect

<button class="button hover-shift-t-2 ease-200">up on hover</button>
<button class="button hover-rotate-2 ease-200">rotate on hover</button>
<button class="button hover-scale-up-1 ease-200">zoom on hover</button>
<button class="button hover-bg-green ease-200">color on hover</button>
<button class="button hover-bg-gray-darkest ease-200">dark on hover</button>

Group

Use .horizontal-group class to make a horizontal button group or .vertical-group to make a vertical button group

<div class="horizontal-group">
    <button type="button" class="button bg-white gray border-gray">Left</button>
    <button type="button" class="button bg-white gray border-gray">Center</button>
    <button type="button" class="button bg-white gray border-gray">Right</button>
</div>
<!-- Vertical button group -->
<div class="vertical-group">
    <button type="button" class="button bg-white gray border-gray">Top</button>
    <button type="button" class="button bg-white gray border-gray">Middle</button>
    <button type="button" class="button bg-white gray border-gray">Bottom</button>
  </div>