Badge

Badges are used for certain indications for the user. There are lot of variations to serve the purpose.

Badge on Icon 

<div class="badge-container">
<i class="fas fa-bell bdg-i"></i>
<div class="badge badge-online badge-icon">
</div></div>
            
<div class="badge-container">
<i class="fab fa-facebook-messenger bdg-i"></i>
<div class="badge badge-dnd badge-icon">
</div></div>
            
<div class="badge-container">
<i class="fas fa-envelope bdg-i"></i>
<div class="badge badge-idle badge-icon">
</div></div>
Badge with text on Icon
4
10
100

<div class="badge-container">
<i class="fas fa-bell bdg-i"></i>
<div class="badge badge-online badge-icon badge-text">4</div>
</div>
            
<div class="badge-container">
<i class="fab fa-facebook-messenger bdg-i"></i>
<div class="badge badge-dnd badge-icon badge-text">10</div>
</div>
            
<div class="badge-container">
<i class="fas fa-envelope bdg-i"></i>
<div class="badge badge-idle badge-icon badge-text">100</div>
</div>
Badge on Avatar
avatar-img
avatar-img
avatar-img 

<div class="avatar-container">
<img src="" alt="avatar-img" class="avatar" />
<div class="badge badge-online"></div>
</div>
            
<div class="avatar-container">
<img src="" alt="avatar-img" class="avatar" />
<div class="badge badge-idle"></div>
</div>
            
<div class="avatar-container">
<img src="" alt="avatar-img" class="avatar" />
<div class="badge badge-dnd"></div>
</div>
Badge on Button
100

<div class="badge-container">
<button class="btn btn-primary">Primary Solid</button>
<div class="badge badge-online badge-btn"></div>
</div>
            
<div class="badge-container">
<button class="btn btn-primary">Primary Solid</button>
<div class="badge badge-dnd badge-btn badge-text">100</div>
</div>
Badge with text

Use the class .badge-solid and use classes .btn-primary, .btn-error, .btn-info,.btn-success, .btn-warning to get different variations.

New
Out of Stock
Default
sale
offer

<div class="badge-solid btn-primary">Text</div>
              
<div class="badge-solid btn-error">Text</div>
          
<div class="badge-solid btn-info">Text</div>
          
<div class="badge-solid btn-success">Text</div>
          
<div class="badge-solid btn-warning">Text</div>
Badge with text outline

Use the class .badge-solid and use classes .btn-primary-outline, .btn-error-outline, .btn-info-outline,.btn-success-outline, .btn-warning-outline to get different variations.

New
Out of Stock
Default
sale
offer

<div class="badge-solid btn-primary-outline">Text</div>
              
<div class="badge-solid btn-error-outline">Text</div>
          
<div class="badge-solid btn-info-outline">Text</div>
          
<div class="badge-solid btn-success-outline">Text</div>
          
<div class="badge-solid btn-warning-outline">Text</div>
Badge pill

Use the class .badge-solid and .badge-pill. Use classes .btn-primary, .btn-error, .btn-info,.btn-success, .btn-warning to get different variations.

New
Out of Stock
Default
sale
offer

<div class="badge-solid badge-pill btn-primary">Text</div>
              
<div class="badge-solid badge-pill btn-error">Text</div>
          
<div class="badge-solid badge-pill btn-info">Text</div>
          
<div class="badge-solid badge-pill btn-success">Text</div>
          
<div class="badge-solid badge-pill btn-warning">Text</div>
Badge pill

Use the class .badge-solid and .badge-pill. Use classes .btn-primary-outline, .btn-error-outline, .btn-info-outline,.btn-success-outline, .btn-warning-outline to get different variations.

New
Out of Stock
Default
sale
offer 

<div class="badge-solid badge-pill btn-primary-outline">Text</div>

<div class="badge-solid badge-pill btn-error-outline">Text</div>
              
<div class="badge-solid badge-pill btn-info-outline">Text</div>
              
<div class="badge-solid badge-pill btn-success-outline">Text</div>
              
<div class="badge-solid badge-pill btn-warning-outline">Text</div>
Avatar
Button