Buttons are HTML elements that are clickable that help with user's interaction with the website.
Buttons allow users to take actions, and make choices, with a single tap.
Buttons - Variants
There are 3 button variants - default, rounded and curved corners. Use the class btn, rounded-btn, or curved-btn for the preferred variant.
Primary Buttons
Primary buttons provide extra visual weight and identify the primary action in a set of buttons.
Use class pri-btn for primary buttons along with the preferred button variant.
Secondary Buttons
Use class sec-btn for secondary buttons along with the preferred button variant.
Link Button
Here are examples of buttons with a link that take you to a different page on click. Use class link-btn for these buttons.
There are 2 variants in addition to the default -
link-btn-outline and link-border-bottom.
Icon Buttons
For buttons with icons, use class icon-btn.
You may use classes icon-pri for primary, icon-light or icon-darkfor the light and dark
variants.
Floating Action Buttons
Floating Action Button (FAB), shaped like a circled
icon floating above the UI, is a tool that allows users to call out the key parts of your app. Use
class fab-default, fab-extended, or fab-squircle for the preferred shapes along with the class fab to get the below floating action buttons.