The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply
a slightly different rendering).
Default
Hover
On click
Disabled
Default
Hover
On click
Disabled
The contained button is used to tell the user what to do first on the screen. Also called a Call To Action (CTA) button.
To use this button, you need to add the .btn and .btn-default classes.
The outlined button is the one that will be used most often within the interface. It is through him that we indicate to users all the actions we want him to do.
To use this button, you need to add the .btn and .btn-outline-default classes.
The text button is used when we want to show two actions, but the first one is the main action. Then, this button is used in the action that is not main.
To use this button, you need to add the .btn and .btn-text-default classes.
Default
Hover
On click
Disabled
Default
Hover
On click
Disabled
The contained button is used to tell the user what to do first on the screen. Also called a Call To Action (CTA) button.
To use this button, you need to add the .btn and .btn-danger classes.
The outlined button is the one that will be used most often within the interface. It is through him that we indicate to users all the actions we want him to do.
To use this button, you need to add the .btn and .btn-outline-danger classes.
The text button is used when we want to show two actions, but the first one is the main action. Then, this button is used in the action that is not main.
To use this button, you need to add the .btn and .btn-text-danger classes.
Default
Hover
On click
Disabled
Default
Hover
On click
Disabled
The contained button is used to tell the user what to do first on the screen. Also called a Call To Action (CTA) button.
To use this button, you need to add the .btn and .btn-neutral classes.
The outlined button is the one that will be used most often within the interface. It is through him that we indicate to users all the actions we want him to do.
To use this button, you need to add the .btn and .btn-outline-neutral classes.
The text button is used when we want to show two actions, but the first one is the main action. Then, this button is used in the action that is not main.
To use this button, you need to add the .btn and .btn-text-neutral classes.
Pin is a button that will be used in specific cases in our UI.
To use this icon, you need to add this <i class="fa-pin"></i>.
Default
Hover
On click
Disabled
The Previuous/Next Button will be used as a control (previous and next) on the existing carousels in the system and in other components.
Default
Hover
On click
Disabled
The Camera Button will be used together with the avatars, so that the user can change their avatar photo.
To use this icon, you need to add this <i class="fa-camera-btn"></i>.
Default
Hover
On click
Disabled