3 Buttons

3.1 Base styles

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-tertiary">Tertiary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-invisible"><i class="material-icons">cake</i> The cake is a lie</button>

3.2 Outline Styles

<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-tertiary-outline">Tertiary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>

3.4 Sizes

Add .btn-lg or .btn-sm for additional sizes.

.btn-lg
Large Button.
.btn-sm
Small Button.
.btn-block
Block Button.
<button type="button" class="btn btn-primary ">Primary Button</button>
<button type="button" class="btn btn-primary-outline ">Primary Button</button>

3.5 Action button

<button type="button" class="btn btn-action"><i class="material-icons">add</i>Button</button>

3.6 States

<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary active">Button</button>
<button type="button" class="btn" disabled>Button</button>

3.7 Switch Button

There are multiple sizes.

.small
Small switch
.tiny
Tiny switch (Usefull for inline)
<label for="switch"><input data-toggle="switch" class="" id="switch" data-inverse="true" type="checkbox" name="my-checkbox" checked> I love cats.</label>

3.8 Examples Buttons

open_in_new Create a new warehouse
<button type="button" class="btn btn-primary-outline sensitive"><i class="material-icons">add_circle</i> Add a new feature</button>
<a href="#" class="btn sensitive external-link"><i class="material-icons">open_in_new</i> Create a new warehouse</a>
<button type="button" class="btn btn-tertiary-outline sensitive"><i class="material-icons">visibility</i> Show disabled modules</button>
<button type="button" class="btn btn-tertiary-outline sensitive">Show disabled modules <i class="material-icons">visibility</i></button>