Badge

Label the data associated with the component.

Avatars with badge

Avatars are labelled with their corresponding data.

dhoni
1
dhoni
5
dhoni
52
                        
<div class="avatar-status badge">
    <img class="avatar avatar-xl" src="..." alt="...">
    <div class="avatar-presence dnd">1</div>
</div>
<div class="avatar-status badge">
    <img class="avatar avatar-lg" src="..." alt="...">
    <div class="avatar-presence online">5</div>
</div>
<div class="avatar-status badge">
    <img class="avatar avatar-std" src="..." alt="...">
    <div class="avatar-presence offline">52</div>
</div>

Icons with badge

Icons are labelled with their corresponding data.

11
1
23
                        
<div class="avatar-status badge">
    <img class="icon" src="..."/>
    <div class="avatar-presence dnd">11</div>
</div>
<div class="avatar-status badge">
    <img class="icon" src="..."/>
    <div class="avatar-presence online">1</div>
</div>
<div class="avatar-status badge">
    <img class="icon" src="..."/>
    <div class="avatar-presence offline">23</div>
</div>