Primitive
Badge CSS-only
Tiny inline status labels: counts, statuses, tags. Eight variants, dot indicator, outline option. Use them next to titles, inside list rows, or on top of icons to convey unread / pending / new state.
About
Overview
A badge is the smallest possible visual indicator: a colored chip with a one-or-two-word label. Use it to show counts ("3 new"), states ("Beta", "Pending"), or category tags. Don't use badges for clickable filters — that's Tag's job.
Badges aren't interactive. They have no hover, no focus, no click target. If a user can act on it, it's a Tag (or a button styled like a chip).
Live
Demo
<span class="ren-badge">Default</span>
<span class="ren-badge ren-badge-success">Active</span>
<span class="ren-badge ren-badge-danger">Failed</span>
<span class="ren-badge ren-badge-outline">Outline</span>Shapes
Variants
Reference
API
CSS classes
| Class | Effect |
|---|---|
.ren-badge | Base. Required. Default neutral fill, subtle border. |
.ren-badge-primary | Accent fill, on-accent text. |
.ren-badge-secondary | Secondary fill — muted gray, for less prominent labels. |
.ren-badge-success / -warning / -danger / -info | Status variants in the matching semantic color. |
.ren-badge-outline | Border only, transparent background. For secondary contexts. |
.ren-badge-dot | The 6 px circle prefix inside a status badge. Combine with .ren-badge-dot-{status}. |
No JavaScript. Pure CSS — render any element (span, div, a) with these classes.
Inclusive by default
Accessibility
Badges are decorative by default. If a badge conveys information not present elsewhere, give it semantic context.
- Counters next to labels: pair the count with the noun it counts.
<a>Inbox <span class="ren-badge">3 unread</span></a>reads correctly.<a>Inbox <span class="ren-badge">3</span></a>doesn't. - Status with color only: don't rely on the color alone — include the status word. "Online" / "Offline" beats just a green / red dot.
- Live counters: if the count updates dynamically, wrap the number in
aria-live="polite"on the parent so screen readers re-announce.
Don't use a badge as a label for an icon-only button. A badge is decoration. The button needs aria-label to be discoverable.
Patterns
Examples
Status next to a title
<h2>
Project Atlas
<span class="ren-badge ren-badge-warning">Pending review</span>
</h2>Unread count on a nav link
<a href="/inbox" class="nav-link">
Inbox
<span class="ren-badge ren-badge-primary" aria-label="3 unread">3</span>
</a>Online indicator
<span class="ren-badge ren-badge-success">
<span class="ren-badge-dot ren-badge-dot-success"></span>
Online
</span>