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.



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.





Code Snippet

Disabled State

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


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