# Badge
> Small labels: soft, solid, live, mono and a count that rolls. Remove a tag and it shrinks away while its neighbours glide to their new place, across lines too.
Data display · badge, tag, label, chip · HTML, CSS, vanilla JS · no dependencies · updated 2026-10-16
Demo: https://kodza.dev/components/badge/
## Files
The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).
- [`kodza-badge.css`](https://kodza.dev/registry/badge/kodza-badge.css) · 6.7 KB
- [`kodza-badge.js`](https://kodza.dev/registry/badge/kodza-badge.js) · 5.9 KB
- [`kodza-badge.html`](https://kodza.dev/registry/badge/kodza-badge.html) · 1.7 KB · the markup, to adapt and paste into your page
**Can you run shell commands? Download the CSS and the JS, don't retype them.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):
```bash
curl -fsSL --create-dirs -o kodza/kodza-badge.css https://kodza.dev/registry/badge/kodza-badge.css
curl -fsSL --create-dirs -o kodza/kodza-badge.js https://kodza.dev/registry/badge/kodza-badge.js
```
Then load the files from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS and the JS from the Code section only if you can't run commands, exactly as they are. (Windows PowerShell: `curl.exe`.)
## API
- Root: `.kodza-badge__count, .kodza-badge-list`
- Attributes:
- `data-count` (e.g. `3`)
- Events: `kodza:badge-remove` (bubbling, from the root)
- Lifecycle: `kodza:init` / `kodza:destroy` on `document`, with `{ detail: { root } }` to target a container.
## Dark mode
The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:
```css
@media (prefers-color-scheme: dark) {
.kodza-badge {
--kz-badge-fg: #f2f2f0;
--kz-badge-soft: rgba(255, 255, 255, 0.1);
--kz-badge-line: rgba(255, 255, 255, 0.22);
--kz-badge-ink: #f2f2f0;
--kz-badge-on-ink: #0a0a0a;
}
}
```
A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-badge { … }`); a single dark section, under that section's class.
## Use it
### Plain HTML page
- CSS: `kodza/kodza-badge.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `