Buttons In Bermuda

Most of the time user clicks on something on the web and it happens to be a button. Buttons are one of the fundamental components on webpage. Bermuda provides different types of buttons which can be customized.

Filled Buttons

Filled buttons are the buttons with filled background color. 

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

                       <button class="btn btn-default">Default</button>

                       <button class="btn btn-secondary">Secondary</button>
                        
                       <button class="btn btn-danger">Danger</button>
                        
                       <button class="btn btn-success">Success</button>
                        
                       <button class="btn btn-warning">Warning</button>
                        
                       <button class="btn btn-link">link</button>

Disabled Buttons

Disabled buttons comes handy when we want to disable the functionality of any button for some time. Bermuda provides the way to disable buttons easily. 

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

                        <button class="btn btn-default btn-disabled">Default</button>
                        
                        <button class="btn btn-secondary btn-disabled"> Secondary</button>
                        
                        <button class="btn btn-danger btn-disabled">Danger</button>
                        
                        <button class="btn btn-success btn-disabled">Success</button>
                        
                        <button class="btn btn-warning btn-disabled">Warning</button>
                        
                        <button class="btn btn-link btn-disabled">link</button>

Outlined Buttons

Outlined buttons are with outline and inherited background color. They are generally used as secondary call to action buttons. 

                      
                        <button class="btn btn-primary-outline">Primary</button>
                        
                        <button class="btn btn-default-outline">Default</button>
                        
                        <button class="btn btn-secondary-outline">Secondary</button>
                        
                        <button class="btn btn-danger-outline">Danger</button>
                        
                        <button class="btn btn-success-outline">Success</button>
                        
                        <button class="btn btn-warning-outline">Warning</button>
                        
                        <button class="btn btn-link-outline">link</button>

Buttons with Icons

Sometimes we have buttons with text as well as icon in it. Bermuda takes care of these type of buttons also. 

                      
                        <button class="btn btn-secondary border-rounded-sm text-offwite btn-icon">
                            <img
                              class="btn__icon"
                              src="./assets/bell.svg"
                              alt="bell-icon"/>
                            Notifications
                        </button>
        
                        <button class="btn btn-primary border-rounded-sm text-offwite btn-icon">
                            <i class="fab fa-github btn__icon"></i>
                            Github
                        </button>

Floating Buttons

Floating buttons are used for quick actions. These are generally call to action buttons with icons which floats over the screen. 

                      
                        <button class="btn btn-floating btn-default shadow-lg"><i class="fas fa-pen"></i></button>

These are the buttons which Bermuda provides. Feel free to customize them.

  Badges
Cards