Stickers

A sticker wraps content (such as a button or avatar) and positions a badge overlay in a corner.

Examples

Button with Count Badge

<div class="ro-sticker">
  <button type="button" class="ro-btn">
    <span class="ro-btn-text">button</span>
  </button>
  <div class="ro-sticker-item ro-top-right">
    <div class="ro-badge ro-size-sm ro-color-scheme-product">3</div>
  </div>
</div>

Preview

button

3

Avatar with Status Badge (Inset)

Use .ro-variant-inset on the sticker and ro-variant-status on the badge for a presence indicator.

<div class="ro-sticker ro-variant-inset">
  <div class="ro-avatar ro-size-lg">
    <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=12" />
  </div>
  <div class="ro-sticker-item ro-bottom-right">
    <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-xs"></div>
  </div>
</div>

Preview

Positions

Add .ro-top-left, .ro-top-right, .ro-bottom-left, or .ro-bottom-right on .ro-sticker-item.

Properties

Class	Description
.ro-sticker	Relative wrapper (width: fit-content) for the main content and overlay.
.ro-sticker-item	Absolutely positioned overlay; requires a corner class (.ro-top-left, .ro-top-right, .ro-bottom-left, or .ro-bottom-right).
.ro-top-left, .ro-top-right, .ro-bottom-left, .ro-bottom-right	Corner placement and translate offset on .ro-sticker-item.
.ro-variant-inset	Removes translate offset (--ro-sticker-transform: none) — badge sits flush on the corner.
.ro-avatar-sticker	Avatar-specific sticker wrapper; see Avatars.

Badges inside .ro-sticker-item use a 1.5px border (--ro-badge-border-width).