Button

Buttons are useful in performing various actions on a single click. Different variants of buttons are present in Sapphire UI.








Primary Buttons



The default buttons are available in different variants. The .btn class needs to be added on the <button> tag. According to your requirement, you can add classes like .btn-primary, .btn-secondary, .btn-default, .btn-success, .btn-error and .btn-disable.







Outline Buttons



For outline buttons, classes like .btn-outline-primary, .btn-outline-secondary, .btn-outline-default, .btn-outline-success, .btn-outline-error and .btn-outline-disable can be added.







Link Buttons



Want to attach a link action, at a button tap? Use the Link Button by adding the .btn-link class. There are 3 variations primary, secondary and default. For primary, use the .btn-link-primary.







Icon Button



The class .btn-icon needs to be added along with other classes.







Floating Action Buttons



These buttons can be used by providing the class name as .btn-float.