Button

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

Usage #

The button class and modifiers for colors, roles, and sizes are used to display buttons. Superkube has several 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.


<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 max-100 class. See also the Sizing helper.


<button class="button button-primary max-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 input block. See also the Form module.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input class="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 push-right class for the button. See also flex module and push helper.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input class="input" type="text" />
    </div>
    <div class="form-item flex">
        <button class="button button-primary">Save</button>
        <button class="button push-right">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 Caret 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: 20px;
    --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: 24px;
    --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: transparent;
    --button-color: var(--palette-positive-lightest);
    --button-hover-background-color: var(--palette-positive-dark);
    --button-hover-border-color: transparent;
    --button-hover-color: var(--palette-positive-lightest);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: 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 the module, just add a new modifier to your custom SCSS.


.button-accent {
    --button-background-color: var(--palette-yellow-base);
    --button-border-color: transparent;
    --button-color: var(--palette-black);
    --button-hover-background-color: var(--palette-yellow-dark);
    --button-hover-border-color: transparent;
    --button-hover-color: var(--palette-black);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: 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(90deg, var(--palette-purple-base), var(--palette-blue-base));
    --button-border-color: transparent;
    --button-color: var(--palette-active-lightest);
    --button-hover-background-color: var(--palette-active-dark);
    --button-hover-border-color: transparent;
    --button-hover-color: var(--palette-active-lightest);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: 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: transparent;
    --button-hover-border-color: 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 #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// =ButtonDefault
// colors
--button-background-color: transparent;
--button-border-color: var(--palette-black-20);
--button-color: var(--palette-neutral-darker);
--button-hover-background-color: var(--palette-black-5);
--button-hover-border-color: var(--palette-black-20);
--button-hover-color: var(--palette-black);
--button-disabled-background-color: transparent;
--button-disabled-border-color: var(--palette-black-20);
--button-disabled-color: var(--palette-black-80);

// params
--button-font-size: 15px;
--button-font-weight: var(--font-weight-semibold);
--button-border-radius: var(--radius-base);
--button-line-height: 1;
--button-letter-spacing: 0;
--button-text-transform: none;
--button-padding-y: 0;
--button-padding-x: 20px;
--button-border-width: 1px;
--button-border-style: solid;
--button-opacity: 1;
--button-box-shadow: none;
--button-height: 42px;

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