Components Module For Button.

sircus-components-button | v4.0.0

Default

a.Button
<a class="Button" href="#">a.Button</a>
<button type="button" class="Button is-active">active</button>
<button type="button" class="Button is-disabled">disabled</button>

Modofier: color

Primary

a.Button

secondary

a.Button

notice

a.Button

success

a.Button

warning

a.Button

error

a.Button

<!-- Primary -->
<a class="Button Button--primary" href="#">a.Button</a>
<button type="button" class="Button Button--primary is-active">active</button>
<button type="button" class="Button Button--primary is-disabled">disabled</button>
<!-- Secondary -->
<a class="Button Button--secondary" href="#">a.Button</a>
<button type="button" class="Button Button--secondary is-active">active</button>
<button type="button" class="Button Button--secondary is-disabled">disabled</button>
<!-- Notice -->
<a class="Button Button--notice" href="#">a.Button</a>
<button type="button" class="Button Button--notice is-active">active</button>
<button type="button" class="Button Button--notice is-disabled">disabled</button>
<!-- Success -->
<a class="Button Button--success" href="#">a.Button</a>
<button type="button" class="Button Button--success is-active">active</button>
<button type="button" class="Button Button--success is-disabled">disabled</button>
<!-- Warning -->
<a class="Button Button--warning" href="#">a.Button</a>
<button type="button" class="Button Button--warning is-active">active</button>
<button type="button" class="Button Button--warning is-disabled">disabled</button>
<!-- Error -->
<a class="Button Button--error" href="#">a.Button</a>
<button type="button" class="Button Button--error is-active">active</button>
<button type="button" class="Button Button--error is-disabled">disabled</button>

Modofier: Fill

default

a.Button

primary

a.Button

secondary

a.Button

notice

a.Button

success

a.Button

warning

a.Button

error

a.Button

<a class="Button" href="#">a.Button</a>
<button type="button" class="Button Button--fill is-active">active</button>
<button type="button" class="Button Button--fill is-disabled">disabled</button>
<!-- Primary -->
<a class="Button Button--fill Button--primary" href="#">a.Button</a>
<button type="button" class="Button Button--fill Button--primary is-active">active</button>
<button type="button" class="Button Button--fill Button--primary is-disabled">disabled</button>
<!-- Secondary -->
<a class="Button Button--fill Button--secondary" href="#">a.Button</a>
<button type="button" class="Button Button--fill Button--secondary is-active">active</button>
<button type="button" class="Button Button--fill Button--secondary is-disabled">disabled</button>
<!-- Notice -->
<a class="Button Button--fill Button--notice" href="#">a.Button</a>
<button type="button" class="Button Button--fill Button--notice is-active">active</button>
<button type="button" class="Button Button--fill Button--notice is-disabled">disabled</button>
<!-- Success -->
<a class="Button Button--fill Button--success" href="#">a.Button</a>
<button type="button" class="Button Button--fill Button--success is-active">active</button>
<button type="button" class="Button Button--fill Button--success is-disabled">disabled</button>
<!-- Warning -->
<a class="Button Button--fill Button--warning" href="#">a.Button</a>
<button type="button" class="Button Button--fill Button--warning is-active">active</button>
<button type="button" class="Button Button--fill Button--warning is-disabled">disabled</button>
<!-- Error -->
<a class="Button Button--fill Button--error" href="#">a.Button</a>
<button type="button" class="Button Button--fill Button--error is-active">active</button>
<button type="button" class="Button Button--fill Button--error is-disabled">disabled</button>

Modofier: Size

<a class="Button Button--sm" href="#">Small</a>
<a class="Button" href="#">Normal</a>
<a class="Button Button--lg" href="#">Large</a>
<a class="Button Button--xl" href="#">Extra Large</a>
<button type="button" class="Button t-widthFull t-mbMi">Button</button>

Modofier: Reset

<a class="Button Button--reset" href="#">Normal</a>
<a class="Button Button--reset is-active" href="#">Active</a>
<a class="Button Button--reset is-disabled" href="#">Disable</a>

Install

npm install sircus-components-button sircus-variables

CSS import

@import "sircus-components-button";
@import "sircus-components-button/color";
@import "sircus-components-button/fill";
@import "sircus-components-button/size";
@import "sircus-components-button/reset";
@import "sircus-variables";

CSS

@import "./lib/button";