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.

Default #

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

Secondary #

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

Tertiary #

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

Small #

<button class="button is-small">Button</button>
<button class="button is-secondary is-small">Button</button>
<button class="button is-tertiary is-small">Button</button>

Big #

<button class="button is-big">Button</button>
<button class="button is-secondary is-big">Button</button>
<button class="button is-tertiary is-big">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.

<button class="button" disabled>Button</button>
<button class="button is-disabled">Button</button>
<button class="button is-secondary" disabled>Button</button>
<button class="button is-tertiary" disabled>Button</button>

Size #

Just increase or decrease the font size for your button to make it bigger or smaller.

// css
.button-action-big {
    font-size: 20px;
.button-action-small {
    font-size: 13px;
// html
<a href="#" class="button button-action-big" role="button">Button</a>
<button class="button is-secondary button-action-small">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 is-inverted" role="button">Button</a>
<button class="button is-inverted is-secondary">Button</button>
<button class="button is-inverted is-tertiary">Button</button>

<button class="button is-inverted" disabled>Disabled</button>
<button class="button is-inverted is-secondary" disabled>Disabled</button>
<button class="button is-inverted is-tertiary" disabled>Disabled</button>

Width #

Following framework-wide rules, it is very easy to manipulate button width sizes. Just use is-100 class to make a button 100% wide or is-50 to a 50% wide.

<button class="button is-100">...</button>
<button class="button is-secondary is-50">...</button>

Icons #

In the buttons, you can use predefined Kube's icons or any other icons from your favorite set, to give the buttons more meaning.

<button class="button is-icon"><span class="icon-kube-calendar"></span></button>
<button class="button is-icon"><span class="icon-kube-calendar"></span> Change</button>
<button class="button is-secondary is-icon"><span class="icon-kube-search"></span></button>
<button class="button is-secondary is-icon"><span class="icon-kube-search"></span> Search</button>

Caret #

<button class="button">Button <span class="caret is-down"></span></button>
<button class="button is-secondary">Button <span class="caret is-down"></span></button>
<button class="button is-tertiary">Button <span class="caret is-down"></span></button>

Loading #

Add the loading class to your button to show the progress state.

<button class="button is-loading"></button>
<button class="button is-loading">Loading</button>
<button class="button is-secondary is-loading">Loading</button>
<button class="button is-tertiary is-loading">Loading</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.

<button class="button is-destructive">Button</button>
<button class="button is-destructive is-secondary">Button</button>
<button class="button is-destructive is-tertiary">Button</button>

.button.is-destructive {
    // $back-color, $text-color
    @include make-button(#ea6474, #fff);