Button

Buttons are used by the website user to perform important actions, or navigate the site.

Primary Buttons

Primary buttons are the most important functionality buttons. Thus they should be easily visible and accessible. To use these add the class button followed by class button-primary and add any of the following classes for the different types of buttons - btn-solid, btn-outline, button-text-icon, button-icon and button-link.

Primary Solid Primary Outline Add to Cart Docs

You can paste the below code to get the buttons using classes for the desired type of button.

Secondary Buttons

To use secondary buttons add the class button followed by class button-secondary and add any of the following classes for the different types of buttons - btn-solid, btn-outline, button-text-icon, button-icon and button-link.

Primary Solid Primary Outline Add to Cart Docs

You can paste the below code to get the secondary buttons using classes for the desired type of button.

Disabled Buttons

Disabled buttons are not allowed to be clicked and perform no action. To use a disabled button add the class button-disabled.

Primary Solid Primary Outline Add to Cart Docs

You can paste the below code to get the diabled buttons of different types.

Floating Buttons

Floating buttons remain at the top of all content on the website and remain fixed at the bottom left of the screen. They are used to perform important actions such as - jump to top of page. To use a floating button add the class button-floating to the base class button.

You can paste the below code to get the floating button.