Button

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
<button class="button">Button</button>
<a href="#" class="button">Button</a>

Secondary

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

Tertiary

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

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

Button     


    

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

    
// HTML
<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>

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