Getting Started

Badges

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

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.

favorite_border

2

favorite_border

2

expand_more

Button Badges

Button badges can be created by enclosing button in our badge container. Then use our utility classes for badges shown below.

99+

2

expand_more

Badges with texts

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

expand_more

Profile Badges

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.

minion-badge

minion-badge

minion-badge

expand_more