Badge

A badge is a small visual indicator for counts, labels, or presence status. To attach a badge to an avatar or button, use Stickers (.ro-sticker, .ro-sticker-item, corner classes).

Examples

Basic Badge

Use .ro-badge for a neutral badge. Default size is base (24px) — no size class required.

<div class="ro-badge">5</div>

Preview

5

Sizing

Sizes: 2xs, xs, sm, default (base), lg, xl.

<div class="ro-stack">
  <div class="ro-badge ro-size-2xs">1</div>
  <div class="ro-badge ro-size-xs">10</div>
  <div class="ro-badge ro-size-sm">10</div>
  <div class="ro-badge">99+</div>
  <div class="ro-badge ro-size-lg">99+</div>
  <div class="ro-badge ro-size-xl">99+</div>
</div>

Preview

1

10

10

99+

99+

99+

Color Schemes

Apply .ro-color-scheme-product or .ro-color-scheme-danger for semantic count badges.

<div class="ro-stack">
  <div class="ro-badge ro-color-scheme-product">5</div>
  <div class="ro-badge ro-color-scheme-danger">5</div>
</div>

Preview

5

5

Status Badge

For presence dots, combine .ro-variant-status with a status color scheme. Inner text is hidden — leave the badge empty.

<div class="ro-stack">
  <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-sm"></div>
  <div class="ro-badge ro-variant-status ro-color-scheme-incall ro-size-sm"></div>
  <div class="ro-badge ro-variant-status ro-color-scheme-snooze ro-size-sm"></div>
  <div class="ro-badge ro-variant-status ro-color-scheme-disconnected ro-size-sm"></div>
</div>

Preview

Icon-only Badge

When .ro-badge contains only a .ro-icon child, the badge becomes a fixed square sized to the icon.

<div class="ro-badge ro-size-sm">
  <i class="ro-icon ro-icon-info-circle"></i>
</div>

Preview

---

Deprecated Variants

The following are no longer shipped in @ringover/styles:

• Color schemes: info, success, warning, white
• Size tokens: md, 2xl, 3xl (pre-3.18 badge scale)
• Position helpers: .ro-length-3, .ro-pos-absolute, .ro-offset — use Stickers instead

Use product, danger, or a status variant instead. Prefer .ro-size-* classes over data-ro-size (legacy attribute still supported). See the Migration guide.

Properties

Class	Default	Description
.ro-badge		Root element. Neutral background when no color scheme is set.
.ro-size-2xs	base (24px)	12px badge.
.ro-size-xs		16px badge.
.ro-size-sm		20px badge.
.ro-size-lg		32px badge.
.ro-size-xl		40px badge.
.ro-color-scheme-product	(neutral)	Product accent badge.
.ro-color-scheme-danger		Danger badge.
.ro-variant-status		Dot-only status badge; hides inner content.
.ro-color-scheme-available		Status: available (with .ro-variant-status).
.ro-color-scheme-incall		Status: in call.
.ro-color-scheme-snooze		Status: snooze.
.ro-color-scheme-disconnected		Status: disconnected.