Badges
Badges display quick and easy status, text or number information to the user.
Elixir offers 3 types of badges - Status Bbadge, Notification Badge, and Text Buttons
Status Badge
Status badge represents the status of a user. Elixir offers 4 types of status - Available, idle, do not disturb, and offline.
To generate a status badge use the base class badge-status, and add any one of the following class to alter the status- status-available, status-idle, status-busy, and status-offline.
You can use the
badge-status
along with any avatar classes, and wrap them within the base class badge-container.
Copy the code below to status badge along with circle avatars.
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-1.jpg" alt="Extra Large Size Avatar" class="avatar avatar-xl" />
<span class="badge-status status-available"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-1.jpg" alt="Large Size Avatar" class="avatar avatar-lg" />
<span class="badge-status status-idle"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-1.jpg" alt="Large Size Avatar" class="avatar avatar-md" />
<span class="badge-status status-busy"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-1.jpg" alt="Small Size Avatar" class="avatar avatar-sm" />
<span class="badge-status status-offline"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-1.jpg" alt="Extra Small Size Avatar" class="avatar avatar-xs" />
<span class="badge-status status-offline"></span>
</div>
Copy the code below to status badge along with square avatars.
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-2.jpg" alt="Extra Large Size Avatar" class="avatar avatar-xl avatar-square" />
<span class="badge-status status-available"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-2.jpg" alt="Large Size Avatar" class="avatar avatar-lg avatar-square" />
<span class="badge-status status-idle"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-2.jpg" alt="Large Size Avatar" class="avatar avatar-md avatar-square" />
<span class="badge-status status-busy"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-2.jpg" alt="Small Size Avatar" class="avatar avatar-sm avatar-square" />
<span class="badge-status status-offline"></span>
</div>
<div class="badge-container m-0-5">
<img src="/Components/assets/avatar-2.jpg" alt="Extra Small Size Avatar" class="avatar avatar-xs avatar-square" />
<span class="badge-status status-offline"></span>
</div>
Notification Badge
To generate notification badges use the base class badge-status along with the supporting class badge-notification.
Elixir offers notification badges in both primary and secondary color background variations.
10
4
Copy the code below to use notification status badge with in any of the 2 variations
<div class="badge-container">
<span class="badge-icon">
<i class="fas fa-bell icon-bell"></i>
</span>
<span class="badge-status badge-notification badge-primary p-0-25">
10
</span>
</div>
<div class="badge-container">
<span class="badge-icon">
<i class="fas fa-shopping-cart icon-cart"></i>
</span>
<span class="badge-status badge-notification badge-secondary">
4
</span>
</div>
Text Badge
To generate text badges, use the base class badge along with the the supporting class round-pill for a pill shaped badge.
Sale
Sale
Sale
Sale
Copy the code below to use square or pill shaped badges.
<span class="badge badge-primary py-0-5 px-0-75 m-0-25">
Sale
</span>
<span class="badge badge-secondary py-0-5 px-0-75 m-0-25">
Sale
</span>
<span class="badge badge-primary round-pill py-0-5 px-1 m-0-25">
Sale
</span>
<span class="badge badge-secondary round-pill py-0-5 px-1 m-0-25">
Sale
</span>