Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, or sending a mail. In order to only use the Button Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Button/button.css" />

Primary Button

To use the primary buttons you just need to add class name btn-primary followed by varient name: btn-outline, btn-accent, btn-danger(eg. class="btn-primary btn-outline"). You can copy the html part from below code snippet.

                
                    <button class="btn-primary">Primary Button</button>
                    <button class="btn-primary btn-outline">Outline Button</button>
                    <button class="btn-primary btn-accent">Accent Button</button>
                    <button class="btn-primary btn-danger">Danger Button</button>

Icon Button

To use the icon buttons you just need to add class name btn-icon followed by varient name: btn-icon-txt, btn-icon-txt btn-outline (eg. class="btn-icon btn-icon-txt").

If you want to use the same icon as below, you will need to add this highlighted link to the head tag of your html document: @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); (Credits: font-awesome). Alternatively, you can use any other icons of your choice also.

You can copy the html part from below code snippet.

                
                    <button class="btn-icon">
                        <i class="icon-in-btn fas fa-download fas-2x"></i>
                    </button>
                    <button class="btn-icon btn-icon-txt">
                        <i class="icon-n-btn-txt fas fa-shopping-cart"></i> Add to Cart
                    </button>
                    <button class="btn-icon btn-outline">
                        <i class="fas fa-save"></i> Save
                    </button>

Link Button

Want to attach a link to your button? Just add the class name btn-link followed by varient name: btn-primary, btn-icon (eg. class="btn-link btn-primary"). You can copy the html part from below code snippet.

Link Link Download

                
                    <a class="btn-link semibold" href="#">Link</a>
                    
                    <a class="btn-link btn-primary" href="#">Link</a>
                            
                    <a class="btn-link btn-icon semibold" href="#">
                        <i class="icon-in-btn fas fa-download"></i> Download
                    </a>

Floating Action Button

To use the floating action buttons you just need to add class name btn-float followed by varient name: btn-outline, btn-accent (eg. class="btn-float btn-outline"). You can copy the html part from below code snippet.
Note: The user has to explicitly define the position of the buttons according to their respective use cases.

                    
                            <button class="btn-float">
                                <i class="btn-float-icon fas fa-save"></i>
                            </button>
                            <button class="btn-float btn-outline">
                                <i class="fas fa-download"></i>
                            </button>
                            <button class="btn-float btn-accent">
                                <i class="btn-float-icon fas fa-shopping-cart"></i>
                            </button>