Buttons

Buttons are a key part of any user interface. The MIZ framework includes classes for various types of buttons, such as solid, outline, and icon buttons.

Basic Buttons #

                    

                        Primary
                        Secondary
                        Success
                        Danger
                        Warning
                        Information
                        Link
                    
                    
HTML

                    <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-link">Link</button>
                

Outline Buttons #

For outline buttons, use the btn-outline-* classes. These buttons have transparent backgrounds with colored borders and text.

                    

                        Primary
                        Secondary
                        Success
                        Danger
                        Warning
                        Info
                    
                    
HTML

                    <button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary title-text-color">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
                

Icon Buttons #

To add icons to buttons, use the <i> tag. For buttons that only contain icons, use the classes p-1 and d-flex to align them properly.

                    

                        
                            Info
                        
                        
                            Like
                        
                        
                            Success
                        
                    
                    
HTML

                    <button type="button" class="btn btn-outline-info">
    <i class="fa-solid fa-circle-info"></i><span>Info</span>
</button>
<button type="button" class="btn btn-outline-primary">
    <i class="fa-solid fa-thumbs-up"></i><span>Like</span>
</button>
<button type="button" class="btn btn-outline-success bg-success-light-color">
    <i class="fa-solid fa-check-circle"></i><span>Success</span>
</button>
                

Round Buttons #

For round buttons, use the .btn-round class, which creates fully rounded corners.

                    

                        
                            
                            Info
                        
                    
                    
HTML

                    <button type="button" class="btn btn-round btn-outline-info">
    <i class="fa-solid fa-circle-info"></i>
    <span>Info</span>
</button>
                

Classes #

Class	Description
btn	Base class for buttons
btn-primary , btn-primary-*	Apply the relevant background
btn-outline-*	Outline buttons with different colors
btn-round	Creates fully rounded buttons

Additional Information #

• Colors and borders are handled using the get-color() function for dynamic color retrieval.
• Icon buttons are styled with d-flex and gap-1 to space icons and text properly.