Ira — badge

Installation Link

Copy the following to the <head>of your HTML


        <link rel="stylesheet" href="https://design-with-ira.netlify.app/installationLinks/badge.css">

Badges are used to display notifs, and status. To implement this functionality, add the badge-wrapper class to the <div> tag. Inside this wrapper div, give the avatar/ icon. Also, give a <span>tag with class badge to add the badge.

To know more about avatar, see Avatar. For icons, add class icon to the tag.

To make a status badge, leave the badge span empty. For numbered badges, add the required number within the span.

Additional Classes for <span class="badge">

Size Classes

badge-sm
badge-md
badge-lg

Status Classes

These classes add a background to the badges. They may indicate availability or purpose of the badge(for icons)

status-available-bg
status-busy-bg
status-idle-bg
status-active-bg
status-inactive-bg
status-plain-bg
status-info-bg
status-warning-bg
status-error-bg
status-success-bg

To adjust the color of any of the above status classes, in your stylesheet do :root { --color-status-success: <color>; --color-inverse-status-success: <color>; }. This will change the the color wherever you use the status class, that is, in status-warning-outline (borders), status-warning-bg (bacground), and status-warning (text) classes. The inverse --color-inverse-status-warning property is used to provide appropriate text color against the status background.

Position Classes

Position classes are used to set the position of the badge on the required component.

badge-left
badge-right