Badges
Badges can be used for labeling components. Different types of badges are available for different types of labeling.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Default
Primary
Success
Secondary
Danger
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-danger">Danger</span>Please note that contextual badges can be styled using the following CSS selectors:
- .badge.badge-* {...} for light mode.
- .dark-mode .badge.badge-* {...} for dark mode.
This means that something like .badge-primary {...}/.dark-mode .badge-primary {...} is not enough. This is because of how badge styles are structured in Halfmoon.
Pill badges #
The class .badge-pill can be used to create round, pill-like badges.
Default
Primary
Success
Secondary
Danger
<!-- Pill badges -->
<span class="badge badge-pill">Default</span>
<span class="badge badge-primary badge-pill">Primary</span>
<span class="badge badge-success badge-pill">Success</span>
<span class="badge badge-secondary badge-pill">Secondary</span>
<span class="badge badge-danger badge-pill">Danger</span>Link badges #
Badges can also be used as links by adding the appropriate class names to the <a> element.
<!-- Link badges -->
<a href="#" class="badge">Default</a>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-danger">Danger</a>Badge group # Since v1.1.0+
Badges can also be grouped together by placing them inside a container with the .badge-group class. All types of badges can be used inside badge groups, and the badge group itself can also be a link (a.badge-group).
<!-- Badge group -->
<span class="badge-group" role="group" aria-label="Badge group example">
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-danger">Danger</span>
</span>
<!-- Badge group with pill link badges -->
<span class="badge-group" role="group" aria-label="...">
<a href="#" class="badge badge-success badge-pill">Success</a>
<a href="#" class="badge badge-secondary badge-pill">Secondary</a>
</span>
<!-- Badge group as link -->
<a href="#" class="badge-group" role="group" aria-label="...">
<span class="badge bg-dark text-white">downloads</span> <!-- bg-dark = background-color: var(--dark-color), text-white = color: #ffffff --->
<span class="badge badge-primary">1.2M</span>
</a>
Up next:
Breadcrumb
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
