Badge
Badges can be combined with Avatars, they are useful for status of user like busy, offline and away. They can also be used on icons for notifications.
Badges on Image Avatars
The First variant of Badge is for Round Image Avatars. For Badges on Round Image avatars, use the .badge-round-avatar class. As the avatar size changes, badge sizes differ using the .badge-sm | .badge-md | .badge-lg | .badge-xs classes. Based on the user status, you can also use different badges like .badge-busy, .badge-online, .badge-away.
The second variant of Badge is for Square Image Avatars, only difference is that you have to add the .badge-square-avatar class.
Badge on Icons
For Icons, you can add these four classes .badge-icon, .badge-number, .badge-left, .badge-right.