Badges
Badges are small labeling components which can be used for notification counters and other indicators.
Examples #
Badges can be created using the .badge class. They scale to match the size of the immediate parent element by using relative font sizing and em units. Therefore, they can be used inside elements and components such as headings and buttons.
However, the most common use case for badges is using utility classes (particularly positioning utilities) to position them in ways where they best serve as labels and indicators. This is shown in the examples below.
HTML
<button type="button" class="btn btn-secondary position-relative">
<i class="fa-light fa-inbox me-1"></i> Inbox
<span class="badge position-absolute top-0 start-100 translate-middle text-bg-primary">1</span>
</button>
<button type="button" class="btn btn-secondary position-relative ms-2">
<i class="fa-light fa-user me-1"></i> Profile
<span class="badge position-absolute top-0 start-100 translate-middle rounded-pill bg-danger p-1">
<span class="visually-hidden">New alerts</span>
</span>
</button>
Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).
Background colors #
The color and background-color of badges can be easily changed by using the color and background helpers. You can also use utilities (.text-{color} and .bg-{color}) to get the look you want, although this is not recommended because of anti-aliasing.
HTML
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
Accessibility
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the.visually-hidden class.
Pill badges #
You can also create rounded, pill-like badges using the .rounded-pill class.
HTML
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.