Buttons

Buttons, as we already know are the sources for taking user actions. These actions help you interact with the websites.

Contained buttons

These buttons represent call-to-action, meaning they contain primary actions in your website. They are high-emphasis, distinguished by their use of elevation and fill. Here we have these colors based on the type of usecase, primary meaning the primary color that runs in your app indicating the primary actions, green button for success & red buttons for errors.

                        
Primary
Secondary
Success
Error
Light
                        
                    

Outlined buttons

These buttons are simply outlined buttons with white background color. Use this variant by replacing '.btn-variant' with '.btn-outline-variant'. These also reflect the usecase based on colors & hover effects.

                        
Primary
Secondary
Link
Save
Success
Error
                        
                    

Link & icon buttons

Link buttons are text buttons which help you navigate to a link. Icon buttons are simple buttons with an icon embedded mainly seen in social media & shopping sites.

                        
Link

                        
                    

Button with text & icon

These buttons contain a text and an icon. these buttons are fixed to a particular part of the viewport and are stacked on top of all the things. the always appear in the viewport and are usually used to provide a way to allow user to scroll to top or open menus

                        
Save
                        
                    

Floating action buttons

These buttons are seen fixed to a particular part of the screen. They provide a way to allow user to open menus, move to top or bottom of the screen.