Badge
Badges are absolute elements that usually appear near another element. Typically they contain a number or other characters. Avatar badges can also be used to convey specific information regarding the object in the avatar.
Avatar Badge
<div class="avatar avatar-xl"><span class="badge badge-xl badge-inactive"></span><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-lg"><span class="badge badge-lg badge-active"></span><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-md"><span class="badge badge-md"></span><img src="https://picsum.photos/100" /></div>
<div class="avatar avatar-sm"><span class="badge badge-sm"></span><img src="https://picsum.photos/100" /></div>
Icon Badge
1
2
3
4
<div class="icon icon-xl"><span class="badge badge-xl">1</span><i class="fa fa-cart-plus"></i></div>
<div class="icon icon-lg"><span class="badge badge-lg">2</span><i class="fa fa-cart-plus"></i></div>
<div class="icon icon-md"><span class="badge badge-md">3</span><i class="fa fa-cart-plus"></i></div>
<div class="icon icon-sm"><span class="badge badge-sm">4</span><i class="fa fa-cart-plus"></i></div>
Text Badge
This is a heading 2 badge. NEW
This is a heading 5 error badge. NEW
This is a small para badge. NEW
This is a large success badge. NEW
<h2>This is a heading 2 badge. <span class="badge-text">NEW</span></h2>
<h5>This is a heading 5 error badge. <span class="badge-text badge-inactive">NEW</span></h5>
<p class="sm">This is a small para badge. <span class="badge-text">NEW</span></p>
<p class="lg">This is a large success badge. <span class="badge-text badge-active">NEW</span></p>