Button

Buttons are the most common and most important part of a web app that allows you to navigate from one page to another, perform certain actions etc.

Primary Button

Primary Button are available in 5 varients - solid button, outline button, icon button, solid + icon button and link button. Use the button class for the component and the classes btn-primary btn-solid, btn-primary btn-outline, btn-primary btn-icon, btn-primary btn-text-icon and btn-primary btn-link according to your usecase. You can copy html part from below code snippet.

Primary Code Example

<a href="#" class="btn btn-primary btn-solid">Primary Solid</a>
                    

                    <a href="#" class="btn btn-primary btn-outline">Primary Outline</a>
                    

                    <a href="" class="btn btn-primary btn-icon">
                        <span class="icon">
                            <i class="fa fa-shopping-cart"></i>
                        </span>
                    </a>
                    

                    <a href="/" class="btn btn-primary btn-text-icon">GitHub
                        < span class="icon">
                            <i class="fa fa-github"></i>
                        </span>
                    </a>
                    

                    <a href="/" class="btn btn-primary btn-link">Home </a>

Primary Solid Primary Outline GitHub Home

Secondary Button

Secondary Button are available in 5 varients - solid button, outline button, icon button, solid + icon button and link button. Use the button class for the component and the classes btn-secondary btn-solid, btn-secondary btn-outline, btn-secondary btn-icon, btn-secondary btn-text-icon and btn-secondary btn-link according to your usecase. You can copy html part from below code snippet.

Secondary Code Example

<a href="#" class="btn btn-secondary btn-solid">Secondary Solid</a>
                    

                    <a href="#" class="btn btn-secondary btn-outline">Secondary Outline</a>
                    

                    <a href="" class="btn btn-secondary btn-icon">
                        <span class="icon">
                            <i class="fa fa-shopping-cart"></i>
                        </span>
                    </a>
                    

                    <a href="/" class="btn btn-secondary btn-text-icon">GitHub
                        < span class="icon">
                            <i class="fa fa-github"></i>
                        </span>
                    </a>
                    

                    <a href="/" class="btn btn-secondary btn-link">Home</a>

Secondary Solid Secondary Outline Github Home

Float Button

Float Button are available in 2 varients - primary color and secondary color. Use the button class for the component and the classes according to your usecase. You can copy html part from below code snippet.

Float Code Example


                    <a href="#" class="btn btn-primary-floating">
                        <i class="fa fa-arrow-up icon"></i>
                    </a>
                    

                    <a href="#" class="btn btn-secondary-floating">
                        <i class="fa fa-arrow-up icon">
                    </a>