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. Add classes btn-border and btn-text for alternate buttons.

<button class="btn">default button</button>
<button class="btn btn-border">bordered button</button>
<button class="btn btn-text">text button</button>

Button colors#

Add the btn-primary, btn-success, btn-warning or btn-error class for primary(primary), success(green), warning(orange) or error(red) button color.

<button class="btn btn-primary">primary button</button>
<button class="btn btn-success">success button</button>
<button class="btn btn-warning">warning button</button>
<button class="btn btn-error">error 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>

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

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

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>

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>