Badges are the small components which we found on top corners or sometimes on bottom corners of the other components like cart image, bell image or on avatar showing some information. Bermuda provides the badge components which you can use on your own comonents.
Badges In Bermuda
Badges on Avatars
<div class="avatar__badge-container border-rounded-full" >
<img
class="avatar avatar__badge-img"
src="./assets/avatar.png"
alt="default-avatar"
/ >
<div class="badge avatar__badge online" ></div>
</div>
<div class="avatar__badge-container border-rounded-full" >
<img
class="avatar avatar__badge-img"
src="./assets/avatar.png"
alt="default-avatar"
/ >
<div class="badge avatar__badge offline" ></div>
</div>
<div class="avatar__badge-container border-rounded-full" >
<img
class="avatar-lg avatar-square avatar__badge-img"
src="./assets/avatar.png"
alt="default-square-avatar"
/ >
<div class="badge avatar__badge dnd" ></div>
</div>
Badges On Icons
As we have badges on avatars we also have badges on icons like cart, mail or bell showing some information.
10
15
99
<!-- Badge on Cart Icon -->
<div class="badge__container">
<img
class="badge__container-img"
src="./assets/cart.svg"
alt="Cart-img"
/>
<div
class="badge badge-top-right border-rounded-full bg-primary text-offwhite bold-xl"
>
10
</div>
</div>
<!-- Badge on Bell Icon -->
<div class="badge__container">
<img
class="badge__container-img"
src="./assets/bell.svg"
alt=""
/>
<div
class="badge badge-top-right border-rounded-full bg-dark text-offwhite bold-xl"
>
15
</div>
</div>
<!-- Badge on Mail Icon -->
<div class="badge__container">
<img
class="badge__container-img"
src="./assets/mail.svg"
alt=""
/>
<div
class="badge badge-top-left border-rounded-full bg-danger text-offwhite bold-xl"
>
99
</div>
</div>
That's it for badges. I hope you can cusomize them as you need.