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-light
button-dark


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

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

Default Primary Dark Light


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

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-buttons 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-buttons">
        <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-buttons 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="icon icon-16 icon-light">
        <svg></svg>
    </span>
    <span>
        Like
    </span>
</button>
<button class="button button-primary">
    <span>
        Like
    </span>
    <span class="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>

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, extend the type size and button scales by replacing values. See also how to work with text size and scales for modules.


// =Scales
$scales: map-extend($scales, (
    type: (
        button: (
            large: 21px 1.25 // type size and line spacing
        )
    ),
    button: (
        large: 56px // height of the button
    )
));

Now you can change the values for this variant of the button. For example, to change padding or other appearance parameters. See also how to work with variants for modules.


// =Variants
$variants: map-extend($variants, (
    button: (
        large: (
            padding: .4em 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, extend the type size and button scales by adding the new modifier and values. See also how to work with text size and scales for modules.


// =Scales
$scales: map-extend($scales, (
    type: (
        button: (
            mega: 24px 1.25
        )
    ),
    button: (
        mega: 64px
    )
));

Now add the values for this variant of the button. For example, to add padding or other appearance parameters. See also how to work with variants for modules.


// =Variants
$variants: map-extend($variants, (
    button: (
        mega: (
            padding: .4em 36px
        )
    )
));

As a result, Superkube will automatically generate a button-mega modifier with a new size.


<button class="button button-primary button-mega">Mega</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>

Colors #

Change color

You can change the color of the buttons that are in Superkube by default. Simply extend the $colors map by replacing the default values. See also how to work with colors for modules.


// =Colors
$colors: map-extend($colors, (
    button: (
        default: (
            base: (
                background-color: palette(positive, base),
                border-color: transparent,
                color: palette(positive, lightest)
            ),
            hoverfocus: (
                background-color: palette(positive, dark),
                border-color: transparent,
                color: palette(positive, lightest)
            ),
            disabled: (
                background-color: palette(black),
                border-color: transparent,
                color: palette(black-o, 70)
            )
        )
    )
));

Note: You must first add a color to the palette if it's not already there, and only then use the colors from the palette in $colors. Here's more on how to work with colors in Superkube.

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, first make sure that it is in the color palette. If not, add a new color to $palette.


// =Palette
$palette: map-extend($palette, (
    yellow: (
        darker: #A7820D,
        dark: #D9A205,
        base: #FFBB00
    )
));

Now extend the colors of the module with a new modifier and add colors from the palette.


// =Colors
$colors: map-extend($colors, (
    button: (
        accent: (
            base: (
                background-color: palette(yellow, base),
                border-color: transparent,
                color: palette(black)
            ),
            hoverfocus: (
                background-color: palette(yellow, dark),
                border-color: transparent,
                color: palette(black)
            ),
            disabled: (
                background-color: palette(black),
                border-color: transparent,
                color: palette(white-o, 70)
            )
        )
    )
));

That's all. Now Superkube will automatically generate 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. See more about gradient settings in the background module.


// =Colors
$colors: map-extend($colors, (
    button: (
        action: (
            base: (
                gradient: (
                    from: palette(active, base),
                    to: palette(active, darker)
                ),
                border-color: transparent,
                color: palette(active, lightest)
            ),
            hoverfocus: (
                background-color: palette(active, dark),
                border-color: transparent,
                color: palette(active, lightest)
            ),
            disabled: (
                background-color: palette(black),
                border-color: transparent,
                color: palette(white-o, 70)
            )
        )
    )
));

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. See more about how to configure and work with shadows in the description of the shadow module.


// =Colors
$colors: map-extend($colors, (
    button: (
        raised: (
            base: (
                background-color: palette(white),
                border-color: transparent,
                color: palette(black)
            ),
            hoverfocus: (
                background-color: palette(white),
                border-color: transparent,
                color: palette(neutral, base)
            ),
            disabled: (
                background-color: palette(white),
                border-color: palette(neutral, mid),
                color: palette(black-o, 80)
            )
        )
    )
));


// =Variants
$variants: map-extend($variants, (
    button: (
        raised: (
            base: (
                box-shadow: shadow(default, 150)
            ),
            hoverfocus: (
                box-shadow: shadow(default, 100)
            ),
            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 SCSS variables. This is here for clarity and to simplify modification and overriding of values


// =Type
$scales: (
    type: (
        button: (
            small: 15px 1.25,
            default: 15px 1.25,
            large: 18px 1.25
        )
    ),
    button: (
        small: 32px,
        base: 42px,
        large: 52px
    )
);

// =Colors
$colors: (
    button: (
        default: (
            base: (
                background-color: palette(white),
                border-color: palette(neutral, mid),
                color: palette(neutral, darker)
            ),
            hoverfocus: (
                background-color: palette(neutral, lighter),
                border-color: palette(neutral, mid),
                color: palette(black)
            ),
            disabled: (
                background-color: palette(white),
                border-color: palette(neutral, mid),
                color: palette(black-o, 80)
            )
        ),
        light: (
            base: (
                background-color: palette(white),
                border-color: transparent,
                color: palette(black)
            ),
            hoverfocus: (
                background-color: palette(white-o, 80),
                border-color: transparent,
                color: palette(black)
            ),
            disabled: (
                background-color: palette(white),
                border-color: transparent,
                color: palette(black-o, 80)
            )
        ),
        dark: (
            base: (
                background-color: palette(black),
                border-color: transparent,
                color: palette(neutral, lightest)
            ),
            hoverfocus: (
                background-color: palette(neutral, darker),
                border-color: transparent,
                color: palette(neutral, lightest)
            ),
            disabled: (
                background-color: palette(black),
                border-color: transparent,
                color: palette(white-o, 70)
            )
        ),
        primary: (
            base: (
                background-color: palette(primary, base),
                border-color: transparent,
                color: palette(primary, lightest)
            ),
            hoverfocus: (
                background-color: palette(primary, dark),
                border-color: transparent,
                color: palette(primary, lightest)
            ),
            disabled: (
                background-color: palette(black),
                border-color: transparent,
                color: palette(white-o, 70)
            )
        )
    )
);

// =Variants
$variants: (
    button: (
        default: (
            base: (
                font-weight: 600,
                border-radius: radius(large),
                padding: .4em 18px,
                border-width: 1px,
                border-style: solid
            ),
            disabled: (
                opacity: .5
            )
        ),
        large: (
            border-radius: radius(large),
            padding: .4em 24px
        ),
        small: (
            border-radius: radius(base),
            padding: .4em 14px
        ),
        primary: (
            disabled: (
                opacity: .4
            )
        ),
        dark: (
            disabled: (
                opacity: .4
            )
        )
    )
);