Buttons

Use a brightly-colored basic button and several common variants.

@import "kolache/core/button" as .button;

Link

<button class="button">Button</button>
<a href="#" class="button">Link</a>
<input type="button" class="button" value="Input" />

Variables:

$color - defaults to $white
$bg-color - defaults to $color-primary
$font-weight - defaults to $font-weight-normal
$offset-padding
$border-radius

<button class="button" disabled>Disabled button</button>

Color variant

@import "kolache/core/button:color" as .button--success {
  $bg-color: $color-success;
};
@import "kolache/core/button:color" as .button--danger {
  $bg-color: $color-danger;
};

<button class="button button--success">Button</button>
<button class="button button--danger">Button</button>

Variables:

$bg-color - required
$color - defaults to white

Size variant

@import "kolache/core/button:size" as .button--large {
  $size: 1.25rem;
  };

<button class="button button--large">Button</button>

Variables:

$size - required
$padding - defaults to $offset-padding

Outline button

@import "kolache/core/button:outline" as .button--outline;
@import "kolache/core/button:outline" as .button--outline--danger {
  $color: $color-danger;
};

<button class="button button--outline">Outline button</button>
<button class="button button--outline--danger">Outline button</button>

Variables:

$color - defaults to $color-primary
$border-color - defaults to $color
$bg-color - defaults to transparent

Button link

If it doesn’t have an href attribute, you should be using a <button>. This variant makes a <button> appear and behave visually like an <a> so you can do just that.

Unlike other button variants, this does not need to be combined with the main button class (though it works just the same if you do add both classes).

@import "kolache/core/button:link" as .button-link;

A looks just like a normal link.

A <button class="button-link">link button</button> looks just like
<a href="#">a normal link</a>.

Variables:

$link-color
$link-color-visited
$link-color-hover
$link-color-active