# 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.
```html
PublishedDraftPaidStaleFailedMachine translationNewArchived
```
### Filled
```html
5BetaLiveOverdueDue todayUpdate
```
`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.
```html
DeletedIn the binCompany wiped
```
### Sizes
`badge-sm` for a mark inside a dense row, `badge-lg` for one that stands on its own.
```html
SmallRegularLarge
```
### Beside other things
A count in a navigation link, a status in a heading.
```html
North Bay Stale
```
## 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`](https://github.com/redz-tech/REDZ.UI/blob/main/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 |