Buttons

Primary

<button class=“button”>Button</button>
<a href=”#” class=“button”>Button</a>

Secondary

<button class=“button secondary”>Button</button>
<a href=”#” class=“button secondary”>Button</a>

Outline

Outline class does exactly what it is supposed to do: styles a button with an outline with no fill color.

<button class=“button outline”>Button</button>
<button class=“button secondary outline”>Button</button>

Disabled

Disabled buttons are automatically styles with muted colors, inactive and not clickable. As you can see, there’s no need to set disabled class for the button element, and disabled argument is enough. Having this said, both a link and a button input require disabled class.

<a href=”#” class=“button disabled” role=“button”>Link</a>
<button class=“button secondary” disabled>Button</button>

Small

Buttons come in all sizes and shapes.

<a href=”#” class=“button small” role=“button”>Link</a>
<button class=“button secondary small”>Button</button>

Big

<a href=”#” class=“button big” role=“button”>Link</a>
<button class=“button secondary big”>Button</button>

Large

<a href=”#” class=“button large” role=“button”>Link</a>
<button class=“button secondary large”>Button</button>

Upper

<a href=”#” class=“button upper” role=“button”>Link</a>
<button class=“button secondary upper”>Button</button>
<a href=”#” class=“button upper outline” role=“button”>Link</a>
<button class=“button secondary upper outline”>Button</button>

Round

<a href=”#” class=“button round” role=“button”>Link</a>
<button class=“button secondary round”>Button</button>
<a href=”#” class=“button round outline” role=“button”>Link</a>
<button class=“button secondary round 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.

<a href=”#” class=“button inverted” role=“button”>Link</a>
<button class=“button inverted outline”>Button</button>

Width

<button class=“button w100”>…</button>
<button class=“button secondary w50”>…</button>

Icons

<button class=“button”><i class=“kube-calendar”></i></button>
<button class=“button secondary”><i class=“kube-calendar”></i> Change</button>


<button class=“button outline”><i class=“kube-search”></i></button>
<button class=“button secondary outline”><i class=“kube-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
.button.red {
    // $text-color, $back-color
    @include button(#fff, #ff3366);
}


// html
<button class=“button red”>Button</button>
<button class=“button red outline”>Button</button>