Buttons

Are clickable items used to allows the user take actions or make choices. Each variation has a purpose and an intention (hover, focus, active, selected, disabled) and suggest the ability to interact with an asset with a single tap. Are used in modals, forms and many other components.

Dark

<button class="btn btn-dark">
    Button
</button>

White

<button class="btn btn-white">
    Button
</button>

Disabled Buttons

<button class="btn btn-dark btn-disabled">
    Button
</button>

<button class="btn btn-white btn-disabled">
    Button
</button>

With Icons

<button class="btn btn-white">
    <svg class="w-4 h-4 mr-2 inline fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
    Default
</button>


<button class="btn btn-disable">
    <i class="far fa-spinner fa-spin"></i>
    Button
</button>

Block button

These buttons are used for the identification process such as login, registration, password change etc. They cover the entire width of the container

<button class="btn btn-dark w-full">
    Button
</button>