Button
Buttons are used to perform actions that are called out and described by text, an icon, or both. There are also text-only buttons that are de-emphasized compared to a normal button.
Standard Buttons
Standard buttons are used to emphasize the primary action on a page. In some situations the primary action may be a positive or negative action, in which case that button type would be the primary action. For using these buttons in your codebase add 'btn' and '.btn-variant' classes in your button element and for the addition of paddings and margins, you can use their utility classes.
Outline Buttons
Outlines Buttons are used to give an effective look at buttons, they are used to make a button "Stand Out" etc. For using these buttons in your codebase add 'btn' and '.btn-outline-variant' classes in your button element and for the addition of paddings and margins, you can use their utility classes.
Link Buttons
Link Buttons are references to another page in the site, they are used for navigation and actions that don't affect the website. For using these buttons, just add these classes 'btn', 'btn-variant' and 'link-btn' and for the addition of padding and margins, you can use their utility classes.
Icon Buttons
Icon buttons allow users to take actions, and make choices, with a single tap. For using these buttons, just add these classes 'btn', 'btn-variant' and 'link-btn' and for the addition of padding and margins, you can use their utility classes.
Floating Buttons
A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. For using these buttons, just add these classes 'btn', 'btn-variant' or 'btn-outline-variant' and 'floating-btn' and for the addition of padding and margins, you can use their utility classes.