Choosing the right button class
warning
Bootstrap button classes you should and shouldn't use
Depending on the scenario, use any of the following Bootstrap button classes:
btn-secondary, btn-primary, btn-danger.
The use of other Bootstrap button classes such as
btn-link, btn-warning, btn-info and btn-success
isn't allowed.- Use the class
btn-secondaryfor actions with the same hierarchy, such as “copy”, “paste”, “crop”, etc. - Use the class
btn-primaryto represent a call-to-action, for example "save", "send", etc., in order to draw the user's attraction to this action. - Destructive actions such as "delete", "erase", "unsubscribe", etc.,
should use the class
btn-secondary, however, they require a confirmation message with the ultimate destructive action. This last step requires full attention from the user, therefore you must use the classbtn-danger.
check_circleDo
Deleting this system cannot be reversed and all information will be lost
Cancel
Delete
Buttons are not links
The use of the Bootstrap class btn-link
is not permitted since it blends two different concepts: buttons and links.
Links
Links should only be used to take the user to a different page or section, within or outside of the application. There should be no system action performed by clicking a link.
Buttons
A button is used to perform any action on a given page, module, or component.
An action such as next in a wizard should also use a btn-secondary
because it only moves the user to the next step of a system process in a larger component.
