Component Listing

BADGES

Badges display quick and easy status, text or number information to the user. Oxygen provides 3 types of badges namely:

Badge over Text | Badge over Button | Badge over Icon

.
To use these badges in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/badge/badge.css")

Badge over Text

This component is typically used to display badges over text.
Use the base class badge to generate a simple badge along with the class badge-text to generate a badge over a text element. The class badge-position-text can be used to play around with the position of the badge over the text.

Text over badge.
NEW
```
<div class="badge-container p-2">
    <div class="text gray-text">Text over badge.
      <div class="badge badge-text badge-position-text">NEW</div>
    </div> 
</div>
                        
```
Badge over Button

This component is used to display badges over buttons.
Use the base class badge to generate a simple badge along with the class badge-position-button to play around with the positon of the badge.
```
<div class="badge-container p-2">
    <button class="badge-button">Action
      <p class="badge badge-position-button">9</p>
    </button>    
</div>   
                        
```
Badges over Icon

This component is used to display badges over icons.
Use the base class badge to generate a simple badge along with the class badge-position-icon to play around with the position of the badge.
```
<div class="badge-container p-2">
    <i class="badge-icon fas fa-shopping-cart">
        <p class="badge badge-position-icon">8</p>
    </i>
</div>
                        
```