Menu

Component: Button

Simple buttons

Button
Button
Button
<button type="button" class="btn bg-green">Button</button>
<a href="#" class="btn bg-red">Button</a href="#">
<div class="btn bg-yellow">Button</div>
<span class="btn bg-blue">Button</span>

Rounded buttons

<button type="button" class="btn bg-green br-5">Button</button>
<button type="button" class="btn bg-red br-10">Button</button>
<button type="button" class="btn bg-yellow br-15">Button</button>
<button type="button" class="btn bg-blue rounded">Button</button>

Inverse buttons

<button type="button" class="btn bg-green inverse">Button</button>
<button type="button" class="btn bg-red inverse">Button</button>
<button type="button" class="btn bg-yellow inverse">Button</button>
<button type="button" class="btn bg-blue inverse">Button</button>

Inactive button

<button type="button" disabled class="btn disabled">Not clickable</button>

Buttons with icons

<button type="button" class="btn bg-yellow inverse icon-add">Add</button>
<button type="button" class="btn bg-gray-darkest icon-arrow-left left">Revenir aux articles</button>
<button type="button" class="btn bg-green icon-send">Envoyer</button>

Buttons group horizontal

<div class="btn-group">
	<button type="button" class="btn bg-main-color">Button</button>
	<button type="button" class="btn bg-main-color">Button</button>
	<button type="button" class="btn bg-main-color">Button</button>
</div>

Buttons group vertical

<div class="btn-group vertical">
	<button type="button" class="btn bg-main-color">Button</button>
	<button type="button" class="btn bg-main-color">Button</button>
	<button type="button" class="btn bg-main-color">Button</button>
	<button type="button" class="btn bg-main-color">Button</button>
</div>