@coffeekraken/button-style

Coffeekraken button style

Full stack button styling for your website with buttons like outline, link, etc...

Table of content

1. Features
2. Install
3. Get Started
4. SCSS API
5. Coffeekraken

Features

1. Full button stack with styles
   • Normal buttons
   • Outlined buttons
   • "Links" style buttons
   • disabled buttons
   • Colored buttons

Install

npm install @coffeekraken/button-style --save

Get Started

First, import and init sugar into your project.

Then, import the component into your scss file like so:

@use '@coffeekraken/button-style/index' as button-style;

Then simply use it using the mixins like so to generate the classes:

@include button-style.classes(
	$colors: default primary secondary
);

And use your buttons like so:

<a class="btn" href="#" title="...">Hello world</a>
<a class="btn btn--primary" href="#" title="...">Hello world</a>
<a class="btn btn--outline" href="#" title="...">Hello world</a>
<a class="btn btn" href="#" title="...">Hello world</a>
<button class="btn" disabled>Hello world</button>
<!-- etc... -->

Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...