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.
Copy the code below to status badge along with square avatars.
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
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.