Files

• _buttons.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/buttons

Module Overview

Examples

Styles

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

Button - Block

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

Button - Border

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

Button - Pill

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

Button - Round Pill

<a class="button-round-pill" href="#">Button</a>
<a class="button-round-pill" href="#">Button</a>
<a class="button-round-pill" href="#">Button</a>

Button - Disabled

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

Button - Round

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

Button - Oval

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

Button - Fat

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

Button - Thin

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

Icon Buttons

<a class="button-icon" href="#">
    <i class="fa fa-apple"></i>
</a>

Colors

The colors for the buttons are generated from the color-palette module. Below shows the default colors for these palettes; if you modify the colors in the color-palette module, either by adding, removing or modifying existing values, these will be reflected in your buttons.

Palette - Brand

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

Palette - Greyscale

<a class="button-grey-3" href="#">Button</a>

Palette - Alerts

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

Palette - Social

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

Sizes

For each size in the typography module, a modifier for the buttons is generated for that size.

<a class="button-size-4" href="#">Button</a>

Mixing & Matching

You can of course mix and match any and all of the above combinations. This equates to 1,500+ different button combinations.

<a class="button-block-border-size-3-secondary-oval">Button</a>

<a class="button-icon-size-2-twitter-oval" href="#">
    <i class="fa fa-twitter"></i>
</a>

Combining Styles

Button Group

To group more than one button together you can use the button_group class.

<div class="button_group">
    <a class="button">Button</a>
    <a class="button">Button</a>
    <a class="button">Button</a>
</div>

Customizing

The blockquotes can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
background	color('greyscale', 'grey-4')	The default background color for regular buttons.
color	white	The default text color for regular buttons.
side-padding	1em	The left/right padding for all buttons (recommended to use em's for scaling).
line-height	2.4	The line height for regular buttons.
weight	lighter	The font-family for regular buttons.
border-width	1px	The width of the border for the 'border' modifier.
disabled-opacity	0.6	The opacity for disabled buttons.
round-radius	0.4em	The radius for round buttons.
fat-height	2.8	The line-height for fat buttons.
thin-height	2	The line-height for thin buttons.
group-spacing	0.5em	The spacing between each button in a button group.
group-stack	'break-1'	The value at which buttons in a group should become stacked for mobile devices.

To change one of the above values, pass your new value(s) to the buttons() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include buttons((
    'weight'       : 'bold',
    'border-width' : 3px,
    'round-radius' : 0.6em
));

<a class="button-border-secondary">Button</a>