Badges
A badge is a short label of state or count beside the thing it describes: Published, Draft, 5 new. It never acts - a badge that does something is a chip or a button.
Examples
The plain badge is neutral, for a status that needs no attention. badge-subtle-{tone} is the usual colored form; badge-{tone}, filled, is for the one that must be seen. An icon before the words carries the meaning in forced colors and for people who do not tell the colors apart.
<span class="badge"><i class="bi bi-check2" aria-hidden="true"></i>Published</span>
<span class="badge"><i class="bi bi-pencil-square" aria-hidden="true"></i>Draft</span>
<span class="badge badge-subtle-success"><i class="bi bi-check-circle" aria-hidden="true"></i>Paid</span>
<span class="badge badge-subtle-warning"><i class="bi bi-clock-history" aria-hidden="true"></i>Stale</span>
<span class="badge badge-subtle-danger"><i class="bi bi-x-octagon" aria-hidden="true"></i>Failed</span>
<span class="badge badge-subtle-info"><i class="bi bi-robot" aria-hidden="true"></i>Machine translation</span>
<span class="badge badge-subtle-primary">New</span>
<span class="badge badge-subtle-secondary">Archived</span>Filled
<span class="badge badge-primary">5</span>
<span class="badge badge-secondary">Beta</span>
<span class="badge badge-success">Live</span>
<span class="badge badge-danger">Overdue</span>
<span class="badge badge-warning">Due today</span>
<span class="badge badge-info">Update</span>badge-inverse is the text color with the page color on it - dark in the light theme, light in the dark one - for a mark that must stand apart from every tone: a whole company wiped beside rows deleted for good and rows moved to the bin.
<span class="badge badge-danger">Deleted</span>
<span class="badge badge-warning">In the bin</span>
<span class="badge badge-inverse">Company wiped</span>Sizes
badge-sm for a mark inside a dense row, badge-lg for one that stands on its own.
<span class="badge badge-subtle-primary badge-sm">Small</span>
<span class="badge badge-subtle-primary">Regular</span>
<span class="badge badge-subtle-primary badge-lg">Large</span>Beside other things
A count in a navigation link, a status in a heading.
North Bay Stale
<nav class="nav nav-pills" aria-label="Orders">
<a class="nav-link" href="#badge-beside" aria-current="page">New<span class="badge badge-subtle-primary">5</span></a>
<a class="nav-link" href="#badge-beside">Paid<span class="badge">128</span></a>
</nav>
<h3 class="hstack gap-8 fs-16">North Bay <span class="badge badge-subtle-warning"><i class="bi bi-clock-history" aria-hidden="true"></i>Stale</span></h3>Accessibility
- A badge's words are read with the thing it stands beside; write them so - "5" in "New 5" reads as five new orders only if the link says New.
- The tones of text against their fill are at least 4.5:1 in both themes; a tone alone is never the meaning.
Tokens
From css/components/badge.css. It declares --redz-badge-bg, --redz-badge-fg on its root, never on rows or items.
It reads the theme's --redz-bg-hover, --redz-text-muted, --redz-fs-12, --redz-fs-11, --redz-fs-14, --redz-primary, --redz-primary-contrast, --redz-secondary, --redz-secondary-contrast, --redz-success, --redz-success-contrast, --redz-danger, --redz-danger-contrast, --redz-warning, --redz-warning-contrast, --redz-info, --redz-info-contrast, --redz-text, --redz-bg, --redz-primary-subtle, --redz-secondary-subtle, --redz-success-subtle, --redz-danger-subtle, --redz-warning-subtle, --redz-info-subtle.
From Bootstrap 5.3
| Bootstrap 5.3 | REDZ.UI | Change | Note |
|---|---|---|---|
text-bg-danger | badge-danger | review | on a badge; elsewhere bg-danger with the tone's -contrast text in the module's CSS |
text-bg-dark | badge-inverse | review | on a badge: the text color as its background, light in the dark theme |
text-bg-info | badge-info | review | on a badge; elsewhere bg-info with the tone's -contrast text in the module's CSS |
text-bg-light | - | review | a plain badge, or a tone |
text-bg-primary | badge-primary | review | on a badge; elsewhere bg-primary with the tone's -contrast text in the module's CSS |
text-bg-secondary | badge-secondary | review | on a badge; elsewhere bg-secondary with the tone's -contrast text in the module's CSS |
text-bg-success | badge-success | review | on a badge; elsewhere bg-success with the tone's -contrast text in the module's CSS |
text-bg-warning | badge-warning | review | on a badge; elsewhere bg-warning with the tone's -contrast text in the module's CSS |