Badge Component #

Badges are small count or status indicators that can be used on buttons, icons, or other elements to display relevant information. Below are examples and classes used for badge positioning, styling, and customization.

Basic Example #

Badges can be used to display small indicators or numbers on buttons, icons, and other elements.

            
button99+
            

                
                
HTML
                
            
            <div class="d-flex flex-column align-items-center">
    <button class="btn btn-primary">button
      <span class="badge top-0 left-0 bg-danger-regular-color all-border-full">99+</span>
    </button>
</div>

Badge Positions #

Badges can be positioned on any corner of the element they are applied to. Below are the available positioning classes:

Position	Class Example
Top-Left	.top-0.left-0
Top-right	.top-0.right-0
Bottom-Left	Po.bottom-0.left-0
Bottom-Right	.bottom-0.right-0

Example:

            

                button99+                          
                button99+                          
                button99+                          
                button99+                          
            
            

                
                
HTML
                
            
            <button class="btn btn-primary">
    button
    <span class="badge top-0 right-0 bg-warning-regular-color txt-subtitle all-border-full">99+</span>
</button>

<button class="btn btn-primary">
    button
    <span class="badge top-0 left-0 bg-warning-regular-color txt-subtitle all-border-full">99+</span>
</button>

<button class="btn btn-primary">
    button
    <span class="badge bottom-0 right-0 bg-warning-regular-color txt-subtitle all-border-full">99+</span>
</button>

<button class="btn btn-primary">
    button
    <span class="badge bottom-0 left-0 bg-warning-regular-color txt-subtitle all-border-full">99+</span>
</button>
    

Badge Colors #

You can use various background colors for badges to represent different statuses. Here are the available background color classes:

Color	Class
Danger	.bg-danger-regular-color
Warning	.bg-warning-regular-color
Information	.bg-information-regular-color
Success	.bg-success-regular-color

            

                buttonSuccess
            
            

                
                
HTML
                
            
            <button class="btn btn-primary">
    button
    <span class="badge top-0 left-0 bg-success-regular-color all-border-full">Success</span>
</button>
    

Badge Sizes #

Badges can also be customized with different text sizes by applying appropriate classes:

Size	Class
Small Text	.txt-small
Subtitle Text	.txt-subtitle
Normal Text	.txt-normal
Title Text	.txt-title

            

                button99+                          
            
            

                
                
HTML
                
            
            <button class="btn btn-primary">button
    <span class="badge top-0 left-0 bg-danger-regular-color txt-title all-border-extra-large">99+</span>
</button>
        

Conclusion #

Badges are a great way to add small indicators or alerts to buttons and other elements. You can easily customize their position, color, size, and border to fit your design needs