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

Color Schemes

Chips support a wide range of color schemes organized into three categories: Semantic, Business, and Dynamic.

Semantic & Product

These colors communicate status or align with the main product branding.

<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-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-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-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

Product

Success

Warning

Danger

Favorite

Inverted

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

Deprecated Variants

The following variants and colors are no longer supported in the active stylesheets:

Variants: outlined, muted, muted-outlined.
Colors: info, white. Use neutral or product as alternatives.

Properties

Chip styles are controlled via CSS classes.

Class	Default	Description
`.ro-toggleable`	(none)	Makes the chip interactive. Use with `.active` to show selection state.
*`.ro-color-scheme-`**	(neutral)	Semantic: `product`, `success`, `warning`, `danger`, `favorite`, `inverted` Business: `incoming`, `outgoing`, `missed`, `voicemail`, `snooze` Dynamic: `grey`, `blue`, `green`, `yellow`, `orange`, `red`, `pink`, `purple`, `brown`.
*`.ro-size-`**	`md`	Chip size. Options: `sm`, `lg`.