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 and btn-link for predefined primary and link buttons.

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

Colors

Add the btn-success or btn-error class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.

<button class="btn btn-success">success button</button>
<button class="btn btn-error">error 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-left"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>

Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

<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>

States

Add the active class for active button state style.

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>

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>