Pills

A pill is a compact, square icon or image container used for product logos, channel indicators, or status markers.

Examples

Core

Default branding and surface styles.

<div class="ro-pill ro-color-scheme-product">
  <i class="ro-icon ro-icon-rocket"></i>
</div>
<div class="ro-pill ro-color-scheme-light">
  <i class="ro-icon ro-icon-rocket"></i>
</div>

Preview

Sizing

Use .ro-size-xs, .ro-size-sm, .ro-size-lg, or .ro-size-xl (default is md).

<div class="ro-pill ro-size-xs ro-color-scheme-product"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-size-sm ro-color-scheme-product"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-color-scheme-product"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-size-lg ro-color-scheme-product"><i class="ro-icon ro-icon-rocket"></i></div>

Preview

Color Schemes

Semantic

<div class="ro-pill ro-color-scheme-success"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-color-scheme-warning"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-color-scheme-danger"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-color-scheme-favorite"><i class="ro-icon ro-icon-rocket"></i></div>
<div class="ro-pill ro-color-scheme-inverted"><i class="ro-icon ro-icon-rocket"></i></div>

Preview

Business

<div class="ro-pill ro-color-scheme-incoming"><i class="ro-icon ro-icon-call-in"></i></div>
<div class="ro-pill ro-color-scheme-outgoing"><i class="ro-icon ro-icon-call-out"></i></div>
<div class="ro-pill ro-color-scheme-missed"><i class="ro-icon ro-icon-call-missed"></i></div>
<div class="ro-pill ro-color-scheme-voicemail"><i class="ro-icon ro-icon-voicemail"></i></div>
<div class="ro-pill ro-color-scheme-snooze"><i class="ro-icon ro-icon-snooze"></i></div>

Preview

Vibrant

<div class="ro-pill ro-color-scheme-glass"><i class="ro-icon ro-icon-ai-three-stars"></i></div>
<div class="ro-pill ro-color-scheme-gradient"><i class="ro-icon ro-icon-ai-three-stars"></i></div>

Preview

Custom Image

Wrap images in .ro-pill-img for vanilla HTML.

<div class="ro-pill ro-size-xl">
  <div class="ro-pill-img">
    <img src="/favicon.svg" alt="Logo" />
  </div>
</div>

Preview

Properties

Class	Default	Description
.ro-pill	md (--ro-size-8)	Root pill container.
.ro-pill-img		Image/logo slot.
.ro-size-xs, .ro-size-sm, .ro-size-lg, .ro-size-xl	md	Pill sizes.
.ro-color-scheme-product, .ro-color-scheme-light	product tint	Core schemes.
.ro-color-scheme-success, .ro-color-scheme-warning, .ro-color-scheme-danger		Semantic schemes.
.ro-color-scheme-favorite, .ro-color-scheme-inverted		Additional surface schemes.
.ro-color-scheme-incoming, .ro-color-scheme-outgoing, .ro-color-scheme-missed, .ro-color-scheme-voicemail, .ro-color-scheme-snooze		Business call schemes.
.ro-color-scheme-glass, .ro-color-scheme-gradient		Vibrant / AI schemes.
Dynamic .ro-color-scheme-*		grey, blue, green, yellow, orange, red, pink, purple, brown.