Badge Component #

Description #

Badge is a small component that can be used to display status indicators, notifications, or small pieces of information. It can be positioned on any corner of its parent element and supports various styles, colors, and sizes.

Examples and Classes #

Examples

            

                

                    
button
                    
                        
                    
                
                

                    
button
                    
                        
                    
            
            
            

                
                
HTML
                
            
            <div class="badge-wrapper btn btn-primary px-2 py-1">
    <p>button</p>
    <span class="badge top-0 left-0 bg-danger-regular-color radius-all-full">
        <i class="fa-solid fa-house icon-small"></i>
    </span>
</div>

<div class="badge-wrapper d-flex flex-row justify-content-center align-items-center gap-1 btn btn-primary px-2 py-1">
    <p>button</p>
    <span class="badge-inside bg-danger-regular-color radius-all-full">
        <i class="fa-solid fa-house icon-small"></i>
    </span>
</div>
        

Positioning Classes

Badge can be positioned using these classes:

Class	Description
.top-0.left-0	Positions badge at top-left
.top-0.right-0	Positions badge at top-right
.bottom-0.left-0	Positions badge at bottom-left
.bottom-0.right-0	Positions badge at bottom-right
.badge-inside	Places badge inside the element

Color Classes

Available color classes for badges:

Class	Description
.bg-danger-regular-color	Red color for errors/danger
.bg-warning-regular-color	Yellow color for warnings
.bg-information-regular-color	Blue color for information
.bg-success-regular-color	Green color for success

Text Size Classes

Text size classes for badge content:

Class	Description
.txt-small	Smallest text size
.txt-subtitle	Subtitle text size
.txt-normal	Normal text size
.txt-title	Title text size

Layout Variations

The badge component supports different layout variations:

• Top-Left Position: Badge appears at the top-left corner
• Top-Right Position: Badge appears at the top-right corner
• Bottom-Left Position: Badge appears at the bottom-left corner
• Bottom-Right Position: Badge appears at the bottom-right corner
• Inside Position: Badge appears inside the element

File Locations #

Type	Path
SCSS	miz/themes/mizoon/components/badge/_index.scss
HTML Example	miz/themes/mizoon/components/badge/index.html
JavaScript	miz/themes/mizoon/components/badge/script.js

SCSS Variables #

            

                
                
SCSS
                
            
            $badge-size: 4px;
    

JavaScript #

Currently, there is no specific JavaScript functionality for the badge component.

            

                
                
JavaScript
                
            
            // No JavaScript functionality required