Badges are used to draw user attention on change. That can be a change in status and count. It can be positioned at bottom-right, top-right etc.
Icon badges are very common. Use classes .badge to create such badges. Use varients classes .badge--primary on badge p tag to give them diffrent colors.
2
2
Button badges can be created by enclosing button in our badge container. Then use our utility classes for badges shown below.
99+
2
Text badges are used by enclosing a text inside our badge container. Then use utility class .badge__info--text-right to position it accordingly.
This is the text
2
This is the text
2
Profile badges are very common. They used to represent user current status. For online status use class .badge__info--online, for offline status use class .badge__info--offline etc.