Button

The button component can be used to trigger an action. This component library supports multiple variants of buttons which can be customized easily.

Primary Buttons

You can use primary buttons by adding class btn. You may use the button element or anchor tag (with text or icon).

Primary-Text

Primary Buttons With Icons

You can use icons as primary buttons.

Secondary Buttons

You can also use secondary buttons by adding class btn-secondary.

Different Sizes

Depending on the use-case, you can select a small or a large button. Use btn-small and .btn-large to change the size.

Floating Action Buttons

Floating buttons can be used to promote an important action such as creating or sharing something. They are mostly used for positive actions like adding something to wishlist.

Note that buttons can float against the parent container or the viewport. For static position, use class btn-floating.
For floating with respect to the parent container, add one more class which specifies the position: top-left, top-right, bottom-left, bottom-right.
For floating button with respect to viewport, add class float-on-screen. For example, the button on bottom right of the screen.
Position can be customized by overriding the positions specified in the respective class.

Disabled Button

You can disable buttons by adding class btn-disabled.