← Superkube / Documentation 2.6.1
Modules

Button

The module helps to create different styles, sizes and button states.

Usage #

The button class and modifiers for colors, roles, and sizes are used to display buttons. Superkube has four button variants by default.

  • button
  • button-primary
  • button-dark
  • button-light
  • button-light-outline

<button class="button">Default</button>
<button class="button button-primary">Primary</button>
<button class="button button-dark">Dark</button>
<button class="button button-light">Light</button>
<button class="button button-light-outline">Outline</button>

The button class works with both the button tag and the a link tag.

Default Primary Dark Light Outline 

<a href="#" class="button button-">Default</a>
<a href="#" class="button button-primary">Primary</a>
<a href="#" class="button button-dark">Dark</a>
<a href="#" class="button button-light">Light</a>
<a href="#" class="button button-light-outline">Outline</a>

Full-width

You can make a full-width button using the w-100 class. See also the width module. 


<button class="button button-primary w-100">Primary</button>

Row

You can control the spacing between the buttons arranged in a row with the row module. 


<div class="row row-2">
    <button class="button button-primary">Save</button>
    <button class="button">Cancel</button>
</div>

Form

In forms, buttons should be wrapped in a div tag with the form-item class. This creates a top margin between the buttons and the inputs blocks. See also the form module. 


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text" />
    </div>
    <div class="form-item">
        <button class="button button-primary">Save</button>
        <button class="button">Cancel</button>
    </div>
</form>

Push right

You can push one of the buttons to the right by making the parent block flex and adding a ml-auto class for the button. See also flex and spacing modules. 


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text" />
    </div>
    <div class="form-item flex">
        <button class="button button-primary">Save</button>
        <button class="button ml-auto">Cancel</button>
    </div>
</form>

Icon

The button can have an svg icon on the left or right. See also the icon module. 


<button class="button button-primary">
    <span class="button-icon icon icon-16 icon-light">
        <svg></svg>
    </span>
    <span class="button-label">
        Like
    </span>
</button>
<button class="button button-primary">
    <span class="button-label">
        Like
    </span>
    <span class="button-icon icon icon-16 icon-light">
        <svg></svg>
    </span>
</button>

Caret

If you want to show dropdown at the click of a button, you can add a caret icon. See also the icon module. 


<button class="button">Default <span class="caret"></span></button>
<button class="button button-primary">Primary <span class="caret"></span></button>
<button class="button button-dark">Dark <span class="caret"></span></button>
<button class="button button-light">Light <span class="caret"></span></button>
<button class="button button-light-outline">Outline <span class="caret"></span></button>

Size #

Superkube has three default button sizes. 


<button class="button button-small">Small</button>
<button class="button">Default</button>
<button class="button button-primary">Large</button>

Change size

You can change the default button sizes to what you want. To do this, change module variables in your custom SCSS. See also how to customize the framework. 


.button-large {
    --button-font-size: var(--type-scale-20);
    --button-height: 56px;
    --button-padding-x: 32px;
}

As a result, the large button will get new properties and will look different than the default one. 


<button class="button button-primary button-large">Large</button>

Add size

You can add your own button size. To do this, add the new modifier of button to your custom SCSS. See also how to customize the framework. 


.button-mega {
    --button-font-size: var(--type-scale-24);
    --button-height: 64px;
    --button-padding-x: 36px;
}

As a result, you will have a button-mega modifier with a new size. 


<button class="button button-primary button-mega">Mega</button>

Round #

Use the button-round modifier to make the buttons rounded. 


<button class="button button-primary button-small button-round">Small</button>
<button class="button button-primary button-round">Default</button>
<button class="button button-primary button-primary button-round">Large</button>

Disabled #

The disabled state can be assigned to a button as a disabled class or a disabled attribute. 


<button class="button disabled">Default</button>
<button class="button button-primary" disabled>Primary</button>
<button class="button button-dark" disabled>Dark</button>
<button class="button button-light disabled">Light</button>
<button class="button button-light-outline disabled">Outline</button>

Colors #

Change color

You can change the color of the buttons that are in Superkube by default. Simply change variables for the button in your custom SCSS. See also how to customize the framework. 


.button {
    --button-background-color: var(--palette-positive-base);
    --button-border-color: var(--palette-transparent);
    --button-color: var(--palette-positive-lightest);
    --button-hover-background-color: var(--palette-positive-dark);
    --button-hover-border-color: var(--palette-transparent);
    --button-hover-color: var(--palette-positive-lightest);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: var(--palette-transparent);
    --button-disabled-color: var(--palette-neutral-lightest);
}

Now the button looks different than the default one. It has a green background and greenish text color. 


<button class="button button-small">Small</button>
<button class="button">Default</button>
<button class="button button-large">Large</button>

Add color

To add a new color for a module, just add a new modifier to your custom SCSS. 


.button-accent {
    --button-background-color: var(--palette-yellow-base);
    --button-border-color: var(--palette-transparent);
    --button-color: var(--palette-black);
    --button-hover-background-color: var(--palette-yellow-dark);
    --button-hover-border-color: var(--palette-transparent);
    --button-hover-color: var(--palette-black);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: var(--palette-transparent);
    --button-disabled-color: var(--palette-neutral-lightest);
}

Now you have a new button-accent color modifier. 


<button class="button button-accent button-small">Small</button>
<button class="button button-accent">Default</button>
<button class="button button-accent button-large">Large</button>

Gradient

The button can have a gradient background for any states. 


.button-action {
    --button-background-color: var(--palette-active-base);
    --button-background-image: linear-gradient(180deg, var(--palette-active-base), var(--palette-active-dark));
    --button-border-color: var(--palette-transparent);
    --button-color: var(--palette-active-lightest);
    --button-hover-background-color: var(--palette-active-dark);
    --button-hover-border-color: var(--palette-transparent);
    --button-hover-color: var(--palette-active-lightest);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: var(--palette-transparent);
    --button-disabled-color: var(--palette-neutral-lightest);
}

You can see what it looks like below. 


<button class="button button-action button-small">Small</button>
<button class="button button-action">Default</button>
<button class="button button-action button-large">Large</button>

Shadow

The button can have a shadow for any states. 


.button-raised {
    --button-background-color: var(--palette-white);
    --button-border-color: var(--palette-transparent);
    --button-hover-border-color: var(--palette-transparent);
    --button-box-shadow: var(--shadow-100);
    --button-hover-background-color: var(--palette-white);
    --button-hover-box-shadow: var(--shadow-200);
    --button-disabled-box-shadow: none;
}

That looks really great. 


<button class="button button-raised button-small">Small</button>
<button class="button button-raised">Default</button>
<button class="button button-raised button-large">Large</button>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values. 


// vars
--button-font-size: var(--type-scale-15);
--button-font-weight: var(--font-weight-semibold);
--button-line-height: 1.25;
--button-border-radius: var(--radius-large);
--button-padding-y: .4em;
--button-padding-x: 20px;
--button-border-width: 1px;
--button-border-style: solid;
--button-opacity: 1;
--button-box-shadow: none;
--button-height: 42px;

// small
--button-font-size: var(--type-scale-14);
--button-height: 32px;

// large
--button-font-size: var(--type-scale-18);
--button-height: 56px;

// default
--button-background-color: var(--palette-transparent);
--button-border-color: var(--palette-black-25);
--button-color: var(--palette-neutral-darker);
--button-hover-background-color: var(--palette-black-5);
--button-hover-border-color: var(--palette-black-25);
--button-hover-color: var(--palette-black);
--button-disabled-background-color: var(--palette-white);
--button-disabled-border-color: var(--palette-black-25);
--button-disabled-color: var(--palette-black-80);

// primary
--button-background-color: var(--palette-primary-base);
--button-border-color: var(--palette-transparent);
--button-color: var(--palette-primary-lightest);
--button-hover-background-color: var(--palette-primary-dark);
--button-hover-border-color: var(--palette-transparent);
--button-hover-color: var(--palette-primary-lightest);
--button-disabled-background-color: var(--palette-black-70);
--button-disabled-border-color: var(--palette-transparent);
--button-disabled-color: var(--palette-white-70);

// light
--button-background-color: var(--palette-white-95);
--button-border-color: var(--palette-transparent);
--button-color: var(--palette-black);
--button-hover-background-color: var(--palette-white-80);
--button-hover-border-color: var(--palette-transparent);
--button-hover-color: var(--palette-black);
--button-disabled-background-color: var(--palette-white-95);
--button-disabled-border-color: var(--palette-transparent);
--button-disabled-color: var(--palette-black-80);

// light-outline
--button-background-color: var(--palette-transparent);
--button-border-color: var(--palette-white-60);
--button-color: var(--palette-white-90);
--button-hover-background-color: var(--palette-white-7);
--button-hover-border-color: var(--palette-white-80);
--button-hover-color: var(--palette-white);
--button-disabled-background-color: var(--palette-white-95);
--button-disabled-border-color: var(--palette-transparent);
--button-disabled-color: var(--palette-black-80);

// dark
--button-background-color: var(--palette-black);
--button-border-color: var(--palette-transparent);
--button-color: var(--palette-neutral-lightest);
--button-hover-background-color: var(--palette-neutral-darker);
--button-hover-border-color: var(--palette-transparent);
--button-hover-color: var(--palette-neutral-lightest);
--button-disabled-background-color: var(--palette-black-70);
--button-disabled-border-color: var(--palette-transparent);
--button-disabled-color: var(--palette-white-70);