Buttons#

Buttons include simple button styles for actions in different types and sizes.

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary, btn-secondary, btn-success and btn-error for predefined primary, secondary, success and error buttons.

<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>

Button shapes#

All buttons have a square bottom-right corner by default. Add a round class to the button to round it out.

<button class="btn btn-primary">default button</button>
<button class="btn round">round button</button>

Button sizes#

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

<button class="btn btn-lg">large button</button>
<button class="btn btn-sm">small button</button>

<button class="btn btn-block">block button</button>

<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-down"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-arrow-down"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-down"></i> small</button>

Action buttons#

You can use the btn-action class for a square button. Add another s-circle class for a round button, which is often used as a floating action button.

<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
<button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>

Clear button#

Use btn-clear to add a clear button. Useful for closing Toasts or Modals.

<div class="toast">
  <button class="btn btn-clear float-right"></button>
  <h6>Toast Title</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Button states#

Add the disabled class or the disabled attribute for disabled button state style.

<!-- buttons with disabled state -->
<button class="btn disabled" tabindex="-1">disabled button</button>
<button class="btn" disabled tabindex="-1">disabled button</button>

A button with the loading class can show loading indicator.

<!-- buttons with loading state -->
<button class="btn loading">button</button>
<button class="btn btn-primary loading">primary button</button>

Button groups#

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

<div class="btn-group btn-group-block">
  <button class="btn">first button</button>
  <button class="btn">second button</button>
  <button class="btn">third button</button>
</div>