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

expand_more

<section class="badge">
  <span class="material-icons md-24">favorite_border</span>
  <p class="badge__info badge__info--standard badge__info--primary">2</p>
</section>
<section class="badge">
  <span class="material-icons md-24">favorite_border</span>
  <p class="badge__info badge__info--standard badge__info--danger">2</p>
</section>

Button Badges

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

99+

expand_more

<section class="badge">
  <button class="badge__btn">Hide</button>
  <p class="badge__info badge__info--btn-right">99+</p>
</section>
<section class="badge">
    <button class="badge__btn">Show</button>
    <p class="badge__info badge__info--btn-left">2</p>
</section>

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

expand_more

<section class="badge">
  <p class="badge__text">This is the text</p>
  <p class="badge__info badge__info--text-right">2</p>
</section>
<section class="badge">
    <p class="badge__text">This is the text</p>
    <p class="badge__info badge__info--text-left">2</p>
</section>

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.

expand_more

<div class="badge">
  <img
  src="Your-img-url.png"
  alt="avatar"
  class="avatar"
 />
 <p class="badge__info badge__info--profile badge__info--online"></p>
</div>
<div class="badge">
  <img
  src="Your-img-url.png"
  alt="avatar"
  class="avatar"
 />
 <p class="badge__info badge__info--profile badge__info--offline"></p>
</div>
<div class="badge">
  <img
  src="Your-img-url.png"
  alt="avatar"
  class="avatar"
 />
 <p class="badge__info badge__info--profile badge__info--dnd"></p>
</div>