Badges

Badges are used in multiple ways to show some user information like user status or notification count.

Status Badge

There are 3 types of status badge available online, offline, away, you can use it with avatar class to see its effect, badges are also available in 2 sizes lg and sm, copy and use below html code.

<div class="badge-container">
    <img
      class="avatar lg"
      src="https://semantic-ui.com/images/avatar2/large/elyse.png"
    />
    <span class="badge profile-lg badge-lg status-online"></span>
</div>

<div class="badge-container">
    <img
      class="avatar md"
      src="https://semantic-ui.com/images/avatar2/large/matthew.png"
    />
    <span class="badge profile-md badge-lg status-offline"></span>
</div>

<div class="badge-container">
    <img
      class="avatar md"
      src="https://semantic-ui.com/images/avatar2/large/matthew.png"
    />
    <span class="badge profile-md badge-lg status-online"></span>
</div>

<div class="badge-container">
    <img
      class="avatar xs"
      src="https://semantic-ui.com/images/avatar2/large/kristy.png"
    />
    <span class="badge profile-xs badge-sm status-away"></span>
</div> 
            

Notification Badge

To show notification count you can use notification badge,they are available in 2 types notification-left-badge & notification-right-badge, to use copy the code from below.

<div class="badge-container">
  <button class="badge-btn">Action</button>
  <span class="badge notification-left-badge badge-lg">8</span>
</div>

<div class="badge-container">
  <img src="../icons/home.png" alt="home icon" />
  <span class="badge notification-right-badge badge-lg">7</span>
</div>

<div class="badge-container">
  <img src="../icons/bell.png" alt="home icon" />
  <span class="badge notification-right-badge badge-lg">5</span>
</div>

<div class="badge-container">
  <img src="../icons/shopping-cart.png" alt="home icon" />
  <span class="badge notification-right-badge badge-lg">2</span>
</div>

<div class="badge-container">
  <img src="../icons/email.png" alt="home icon" />
  <span class="badge notification-right-badge badge-lg">4</span>
</div>

<div class="badge-container">
  <button class="badge-btn">Hide</button>
  <span class="badge notification-right-badge badge-lg">9</span>
</div>