Buttons

Buttons are used as triggers for actions. Depending on the use case, buttons contain a combination of a clear label and an icon.

Button Sizes

We offer two button sizes. In order to create a standard button, use the class .btn and for a smaller button add the class .btn-sm.

.btn

.btn-sm

Code Snippet









Icon Buttons

Icon Buttons can contain text or no text. Use the class .btn-link to have an icon button with no background.

If you need an icon on the rightside of a button move the icon markup to the right of the text and add the class .btn-icon-right.

.btn.btn-default

.btn.btn-icon-right

.btn.btn-icon

.btn.btn-link

Code Snippet









Disabled State

Include the class .disabled and , for semantics, the attribute disabled to disable a button.

.btn.disabled


Animated Progress Indicator State

Include the class .fa-spin to the .fa icon to create an animated spinner progress indicator.

.btn .fa.fa-spin

Code Snippet