Badge

A badge is a small visual indicator used to display a number, a status, or a short piece of information, often in relation to another UI element. 🔔

Examples

Basic Badge

Use the .ro-badge class to create a badge. By default, it uses a neutral background color (--ro-colors-component-regular). The content, typically a number, is placed inside the element.

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

Preview

5

Sizing

Control the badge size using size modifier classes like .ro-size-sm, .ro-size-md, etc. Sizes range from xs to 3xl.

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

Preview

1

10

99+

99+

99+

99+

99+

Color Schemes

Apply color schemes using the .ro-color-scheme-{variant} classes. The actively supported variants are product, danger, and white.

<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 class="ro-badge ro-color-scheme-white">5</div>
</div>

Preview

5

5

5

Character Length

When a badge needs to display three characters (e.g., “99+”), add the .ro-length-3 class. This reduces the font size ratio from 0.72 to 0.52 to ensure the text fits correctly.

<div class="ro-badge ro-size-lg">25</div>

<div class="ro-badge ro-size-lg ro-length-3">100</div>

Preview

25

100

Positioned Badge

To attach a badge to another element, wrap them in a container with position: relative. Then, add the .ro-pos-absolute class to the badge to position it at the bottom-right corner. Use .ro-offset to apply a small negative margin (default -4px) for better placement.

<div style="position: relative; display: inline-block;">
<div class="ro-avatar ro-size-xl">
  <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=1"/>
</div>
<div class="ro-badge ro-pos-absolute ro-offset ro-color-scheme-product ro-size-sm"></div>
</div>

Preview

---

Deprecated Variants

The following color schemes were previously supported but are no longer present in the active stylesheets. They may still work if legacy styles are loaded but should be avoided for new development.

• info
• success
• warning

Properties

Badge variants are controlled via modifier classes.

Class	Default Value	Description
.ro-size-{size}	md	Sets the size. Options: xs, sm, md, lg, xl, 2xl, 3xl.
.ro-color-scheme-{variant}	(neutral)	Applies a color theme. Options: product, danger, white. Deprecated: info, success, warning.
.ro-length-3	(none)	Reduces the font size to better accommodate three characters.
.ro-pos-absolute	(none)	Positions the badge absolutely within its nearest positioned ancestor.
.ro-offset	(none)	Applies a small negative offset (-4px), useful when the badge is positioned absolutely.