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