Buttons
Use a brightly-colored basic button and several common variants.
@import "kolache/core/button" as .button;
<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 totransparent
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