Framework buttons
| Class name |
Info |
Example |
| btn |
The main class that has to be on every button. Any other class will be applied next to this one |
Button |
| btn btn-base |
Standard button with the main template background |
Button |
| btn btn-alt |
Standard button with the second main template background |
Button |
| btn btn-light |
Standard button with a light background |
Button |
| btn btn-dark |
Standard button with a dark template background |
Button |
| btn btn-lg btn-base |
Makes the button large |
Button |
| btn btn-sm btn-alt |
Makes the button smaller |
Button |
| btn btn-xs btn-dark |
Makes the button extra small |
Button |
| btn btn-block btn-base |
Make the button full width |
Button |
Left aligned icon buttons
| Class name |
Info |
Example |
| btn btn-icon btn-base fa-paw |
Icon button with the main template background |
Button |
| btn btn-icon btn-alt fa-paw |
Icon button with the second main background |
Button |
| btn btn-icon btn-light fa-paw |
Icon button with a light background |
Button |
| btn btn-icon btn-dark fa-paw |
Icon button with a dark background |
Button |
| btn btn-lg btn-icon btn-base fa-paw |
Large icon button with the main color background |
Button |
| btn btn-sm btn-icon btn-alt fa-paw |
Small icon button with the second main color background |
Button |
| btn btn-xs btn-icon btn-dark fa-paw |
Extra small icon button with a dark background |
Button |
| btn btn-block btn-icon btn-base fa-paw |
Makes the button full width |
Button |
Right aligned icon buttons
To use the right aligned icon buttons use .btn-icon-right next to btn-icon. More detail in the buttons table
| Class name |
Info |
Example |
| btn btn-icon btn-icon-right btn-base fa-paw |
Icon button with the main template background |
Button |
| btn btn-icon btn-icon-right btn-alt fa-paw |
Icon button with the second main background |
Button |
| btn btn-icon btn-icon-right btn-light fa-paw |
Icon button with a light background |
Button |
| btn btn-icon btn-icon-right btn-dark fa-paw |
Icon button with a dark background |
Button |
| btn btn-lg btn-icon btn-icon-right btn-base fa-paw |
Large icon button with the main color background |
Button |
| btn btn-sm btn-icon btn-icon-right btn-alt fa-paw |
Small icon button with the second main color background |
Button |
| btn btn-xs btn-icon btn-icon-right btn-dark fa-paw |
Extra small icon button with a dark background |
Button |
| btn btn-block btn-icon btn-icon-right btn-base fa-paw |
Makes the button full width |
Button |
Bordered buttons
| Class name |
Info |
Example |
| btn btn-b-white |
Bordered button with white color |
Button |
| btn btn-b-base |
Bordered button with the main template color |
Button |
| btn btn-b-alt |
Bordered button with the second main template color |
Button |
| btn btn-b-dark |
Bordered button with a dark color |
Button |
| btn btn-b-light |
Bordered button with a light color |
Button |
| btn btn-lg btn-b-base |
Large bordered button with the main template color |
Button |
| btn btn-sm btn-b-alt |
Small bordered button with second main template color |
Button |
| btn btn-xs btn-b-dark |
Extra small bordered button with a dark color |
Button |
| btn btn-block btn-b-base |
Make the button full width |
Button |
