Component

Filter chips use tags or descriptive words to filter content. Filter chips clearly delineate and display options in a compact area.

iconsChip

Neighborhoods 
<div tabindex="1" class="ray-chip">
  Neighborhoods
</div>

iconsChip with icon

Furnished 
<div tabindex="1" class="ray-chip">
  <div class="ray-chip__icon-wrapper">
    <svg width="10" height="10" viewBox="0 0 10 10">
      <rect
        width="10"
        height="10"
        stroke-width="2"
        stroke="#0000FF"
        fill="#FFFFFF"
      />
    </svg>
    <span class="ray-chip__text">Furnished</span>
  </div>
</div>

iconsJavaScript API

import { Chip } from '@wework/ray-core';

// instantiate all instances on document
Chip.createAll();

// create instance
const chip = Chip.create(document.querySelector('.ray-chip'));

// set the active state of the instance
chip.set('false');

// destroy
chip.destroy();
MethodParamsDescription
Chip.createAllHTMLElement:Objectcreate all instances in document
Chip.createHTMLElement:Objectcreate an instance
Chip.prototype.destroydestroy the instance
Chip.prototype.setBooleansets the active state of the instance

iconsModifiers

Use these modifiers with .ray-chip class.

SelectorDescription
.ray-chip--activeSelector for applying active chip styles
.ray-chip--disabledSelector for applying disabled chip styles