Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons can be used inside modal window, forms , cards , toolbars & navbars.

Basic Button

Basic buttons can be made using pre-defined button classes. It consists primary,secondary and link buttons.

                               
                                <!-- add these predefined button classes for the button component -->

                                <button class="btn-primary">primary</button>

                                <button class="btn-secondary">Secondary</button>

                                <button class="btn-danger">danger</button>

                                <button class="btn-warning">warning</button>

                                <button class="btn-simple">simple</button>

                                <button class="btn-link" href="#">link</button>
                               
                           

Border Buttons

Border Buttons has solid borders around them and can be made using pre-defined button classes.

                                
                                    <!-- add particular classes to get the styling for border buttons -->

                                    <button class=" border-btn border-btn-primary">primary</button>

                                    <button class=" border-btn border-btn-secondary">Secondary</button>

                                    <button class=" border-btn border-btn-danger">danger</button>

                                    <button class=" border-btn border-btn-warning">warning</button>

                                    <button class=" border-btn border-btn-simple">simple</button>

                                    <button class=" border-btn border-btn-link" href="#">link</button>
                                
                            

Icon Buttons

Icon button contains Icon inside in it & can be made using predefined css classes.

                                
                                    <!-- add particular classes to get the styling for icon button -->

                                    <button class=" border-btn border-btn-danger">
                                        <i class="fas fa-trash-alt btn-icon"></i> delete
                                    </button>

                                    <button class="btn-primary">
                                        <i class="fas fa-paper-plane btn-icon"></i> send
                                    </button>

                                    <button class=" border-btn border-btn-secondary">
                                        <i class="fas fa-cart-arrow-down btn-icon"></i> cart
                                    </button>

                                    <button class="btn-simple">
                                        <i class="fas fa-download btn-icon"></i> download
                                    </button>

                                
                            

Floating Action Buttons

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

                                
                                    <!-- create FAB by adding perticular classes -->

                                    <button class="fab btn-secondary">
                                        <i class="fas fa-moon"></i>
                                    </button>

                                    <button class="fab btn-danger">
                                        <i class="fas fa-plus"></i>
                                    </button>

                                    <button class="fab btn-simple">
                                        <i class="fas fa-check"></i>
                                    </button>

                                    <button class="fab btn-primary">
                                        <i class="fas fa-cart-arrow-down"></i>
                                    </button>