Button

The button component gives users the ability to perform an action or navigate to another page. They have multiple styles and states for different needs. Buttons are ideal for drawing the user's attention to exactly what action needs to be initialized.

Solid Button

Solid buttons are generally used to identify main actions.

                    
                        <-- Using the 'btn' class for displaying button-->
                        
                        <button class="btn">DEFAULT</button>
                        <button class="btn btn-primary">PRIMARY</button>
                        <button class="btn btn-secondary">SECONDARY</button>
                        <button class="btn btn-warning">WARNING</button>
                        <button class="btn btn-success">SUCCESS</button>
                        <button class="btn btn-error">ERROR</button>

Outline Button

Sometimes we don't want to display solid buttons and need buttons which dont have background color. Use 'outline' variant of buttons for displaying outline buttons. Can also change the outline using 'outline-variant' classes.

                    
                        <-- Using the 'btn outline' class name for displaying outine button-->
                        <-- Using the 'outline-variant' for different outine variants-->

                        <button class="btn outline">DEFAULT</button>
                        <button class="btn outline-primary">PRIMARY</button>

Icon Button

Few actions need to be communicated through icons for that you can create buttons with icons. Using 'btn-icon' class.

                    
                        <-- Using the 'btn-icon' class for button with icons -->

                        <button class="btn btn-icon">
                            <i class="bi bi-heart"></i>        
                        </button>

Link Button

Buttons which takes you to different location are called link buttons. These can be created using 'btn-link' class.

                    
                        <-- Using the 'btn-link' class for link buttons -->

                        <button class="btn btn-link">OPEN LINK</button>

Floating Button

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. These floating buttons can be created using 'btn-floating' class

                    
                        <-- Using the 'btn-floating' class for floating buttons -->

                        <button class="btn btn-floating">
                            <i class="bi bi-plus"></i>
                        </button>
Badge Card