Buttons

Buttons in Kube are minimalistic, designed for instant and convenient customization, and are ready to be pushed, pressed, clicked and manipulated in whichever ways. A lot of interactive components use buttons, and you should too!.

Primary

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

Secondary

Button
<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.

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

Small

Buttons come in all sizes and shapes.

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

Big

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

Large

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

Upper

Link Link
<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

Link Link
<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.

Link    
<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>