Chips

A chip is a compact element that represents an input, attribute, or action. They can be used for filtering, displaying choices, or showing small pieces of information in a contained way.

Examples

Basic Chip

Use the .ro-chip class to create a chip. The text content is placed within a .ro-chip-text.

<div class="ro-chip">
<span class="ro-chip-text">Basic Chip</span>
</div>

Preview

Basic Chip

Sizing

Adjust the chip size with the .ro-size-* classes. Available sizes are sm and lg.

<div class="ro-chip ro-size-sm"><span class="ro-chip-text">Small</span></div>
<div class="ro-chip"><span class="ro-chip-text">Medium</span></div>
<div class="ro-chip ro-size-lg"><span class="ro-chip-text">Large</span></div>

Preview

Small

Medium

Large

Chip with Icon

Place an icon within the chip for visual context. The CSS automatically handles spacing.

<div class="ro-chip">
<i class="ro-icon ro-icon-info-circle"></i>
<span class="ro-chip-text">Information</span>
</div>

Preview

Information

Chip with Close Button

Add a button ro-btn ro-variant-ghost ro-color-scheme-inverted ro-size-sm, such as a close button, at the end of the chip for actions like removal.

<div class="ro-chip">
  <span class="ro-chip-text">Filter</span>
  <button class="ro-btn ro-variant-ghost ro-color-scheme-inverted ro-size-sm" aria-name="Remove filter">
    <i class="ro-icon ro-icon-x-small"></i>
  </button>
</div>

Preview

Filter

Toggleable Chip

Use the .ro-toggleable class to make a chip interactive. Add the .active class to indicate the selected state.

<div class="ro-chip ro-toggleable">
  <span class="ro-chip-text">Off</span>
  <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
</div>
<div class="ro-chip ro-toggleable active">
  <span class="ro-chip-text">On</span>
  <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
</div>

Preview

Off

On

Color Schemes

Chips support color schemes organized into Core, Semantic, Vibrant, Business, and Dynamic categories.

Core

Default branding and surface styles.

<div class="ro-stack">
  <div class="ro-chip ro-color-scheme-product">
    <span class="ro-chip-text">Product</span>
  </div>
  <div class="ro-chip ro-color-scheme-light">
    <span class="ro-chip-text">Light</span>
  </div>
</div>
<div class="ro-stack">
  <div class="ro-chip ro-toggleable ro-color-scheme-product">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-light">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
</div>

Preview

Product

Light

Toggle

Toggle

Semantic

These colors communicate status or emphasis.

<div class="ro-stack">
  <div class="ro-chip ro-color-scheme-success">
    <span class="ro-chip-text">Success</span>
  </div>
  <div class="ro-chip ro-color-scheme-warning">
    <span class="ro-chip-text">Warning</span>
  </div>
  <div class="ro-chip ro-color-scheme-danger">
    <span class="ro-chip-text">Danger</span>
  </div>
  <div class="ro-chip ro-color-scheme-favorite">
    <span class="ro-chip-text">Favorite</span>
  </div>
  <div class="ro-chip ro-color-scheme-inverted">
    <span class="ro-chip-text">Inverted</span>
  </div>
</div>
<div class="ro-stack">
  <div class="ro-chip ro-toggleable ro-color-scheme-success">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-warning">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-danger">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-favorite">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-inverted">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
</div>

Preview

Success

Warning

Danger

Favorite

Inverted

Toggle

Toggle

Toggle

Toggle

Toggle

Vibrant

.ro-color-scheme-glass adds a frosted glass effect — show it on a textured or colorful background. .ro-color-scheme-ai applies the AI gradient fill.

<div class="ro-u-p-4 ro-u-radius-xl" style="background: var(--ro-gradients-ai);">
  <div class="ro-chip ro-color-scheme-glass">
    <i class="ro-icon ro-icon-rocket"></i>
    <span class="ro-chip-text">Glass</span>
  </div>
</div>
<div class="ro-chip ro-color-scheme-ai">
  <i class="ro-icon ro-icon-ai-three-stars"></i>
  <span class="ro-chip-text">AI</span>
</div>
<div class="ro-chip ro-toggleable ro-color-scheme-ai active">
  <i class="ro-icon ro-icon-ai-three-stars"></i>
  <span class="ro-chip-text">AI toggle</span>
  <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
</div>

Preview

Glass

AI

AI toggle

Business

Specific schemes designed for business contexts such as call logs or communication states.

<div class="ro-stack">
  <div class="ro-chip ro-color-scheme-incoming">
    <i class="ro-icon ro-icon-call-in"></i>
    <span class="ro-chip-text">Incoming</span>
  </div>
  <div class="ro-chip ro-color-scheme-outgoing">
    <i class="ro-icon ro-icon-call-out"></i>
    <span class="ro-chip-text">Outgoing</span>
  </div>
  <div class="ro-chip ro-color-scheme-missed">
    <i class="ro-icon ro-icon-call-missed"></i>
    <span class="ro-chip-text">Missed</span>
  </div>
  <div class="ro-chip ro-color-scheme-voicemail">
    <i class="ro-icon ro-icon-voicemail"></i>
    <span class="ro-chip-text">Voicemail</span>
  </div>
  <div class="ro-chip ro-color-scheme-snooze">
    <i class="ro-icon ro-icon-snooze"></i>
    <span class="ro-chip-text">Snooze</span>
  </div>
</div>
<div class="ro-stack">
  <div class="ro-chip ro-toggleable ro-color-scheme-incoming">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-outgoing">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-missed">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-voicemail">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-snooze">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
</div>

Preview

Incoming

Outgoing

Missed

Voicemail

Snooze

Toggle Incoming

Toggle Outgoing

Toggle Missed

Toggle Voicemail

Toggle Snooze

Dynamic

A set of generic color schemes useful for categorizing items, tags, or users.

<div class="ro-stack">
  <div class="ro-chip ro-color-scheme-grey">
    <span class="ro-chip-text">Grey</span>
  </div>
  <div class="ro-chip ro-color-scheme-blue">
    <span class="ro-chip-text">Blue</span>
  </div>
  <div class="ro-chip ro-color-scheme-green">
    <span class="ro-chip-text">Green</span>
  </div>
  <div class="ro-chip ro-color-scheme-yellow">
    <span class="ro-chip-text">Yellow</span>
  </div>
  <div class="ro-chip ro-color-scheme-orange">
    <span class="ro-chip-text">Orange</span>
  </div>
  <div class="ro-chip ro-color-scheme-red">
    <span class="ro-chip-text">Red</span>
  </div>
  <div class="ro-chip ro-color-scheme-pink">
    <span class="ro-chip-text">Pink</span>
  </div>
  <div class="ro-chip ro-color-scheme-purple">
    <span class="ro-chip-text">Purple</span>
  </div>
  <div class="ro-chip ro-color-scheme-brown">
    <span class="ro-chip-text">Brown</span>
  </div>
</div>
<div class="ro-stack">
  <div class="ro-chip ro-toggleable ro-color-scheme-grey">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-blue">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-green">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-yellow">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-orange">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-red">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-pink">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-purple">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
  <div class="ro-chip ro-toggleable ro-color-scheme-brown">
    <span class="ro-chip-text">Toggle</span>
    <i class="ro-icon ro-icon-check ro-chip-active-icon"></i>
  </div>
</div>

Preview

Grey

Blue

Green

Yellow

Orange

Red

Pink

Purple

Brown

Toggle

Toggle

Toggle

Toggle

Toggle

Toggle

Toggle

Toggle

Toggle

---

Deprecated Variants

The following patterns are removed or deprecated on chips (not on buttons — see Buttons):

• Variants: outlined, muted, muted-outlined — chips use a single filled style; use .ro-toggleable for selection.
• Colors: info, white — use product, light, or a semantic/dynamic scheme.
• Custom color: --ro-chip-rgb is deprecated; prefer --ro-chip-color-scheme or .ro-color-scheme-* (legacy inline styles still work in SCSS).

See the Migration guide.

Properties

Chip styles are controlled via CSS classes.

Class	Default	Description
.ro-chip		Root container (div or button).
.ro-chip-text, .ro-chip-name		Label text (same styling).
.ro-chip-label		Inner wrapper for grouped chip content.
.ro-chip-active-icon	hidden	Check icon; visible when .active or :has(input:checked).
.ro-toggleable	(none)	Interactive chip. Use with .active or a hidden checkbox/radio (:has(input:checked)).
.ro-color-scheme-*	(neutral)	Core: product, light Semantic: success, warning, danger, favorite, inverted Special: glass, ai Business: incoming, outgoing, missed, voicemail, snooze Dynamic: grey, blue, green, yellow, orange, red, pink, purple, brown. Deprecated: info, white.
.ro-size-sm, .ro-size-lg, [data-ro-size]	md	Chip size.

Deprecation Notice

Prefer CSS classes over data-ro-* attributes. data-ro-color-scheme and data-ro-size remain supported for backward compatibility.