Filter Chip CSS Component

A filter chip applies or unapplies its value to a section of dynamic page content (e.g. search results).

A button uses the aria-pressed state to convey application or non-application of the filter. For links, no special treatment is required for the unnapplied filter state.

After filter chip is loaded in the dom, add filter-chip--animated so the animations can work. This only needs to be added for button filter chips

<button class="filter-chip" type="button" aria-pressed="false">
  <svg class="icon icon--16" width="16" height="16">
    <use href="#icon-sneaker-16" />
  </svg>
  <span class="filter-chip__text"> Football </span>
</button>
<a class="filter-chip" href="https://www.ebay.com">
  <svg class="icon icon--16" width="16" height="16">
    <use href="#icon-sneaker-16" />
  </svg>
  <span class="filter-chip__text"> Football </span>
</a>

For the applied filter state, links do not support the aria-pressed property; therefore use clipped text to explictly convey that the filter is applied.

<button class="filter-chip" type="button" aria-pressed="true">
  <svg class="icon icon--16" width="16" height="16">
    <use href="#icon-sneaker-16" />
  </svg>
  <span class="filter-chip__text"> Football </span>
</button>
<a class="filter-chip filter-chip--selected" href="https://www.ebay.com">
  <svg class="icon icon--16" width="16" height="16">
    <use href="#icon-sneaker-16" />
  </svg>
  <span class="filter-chip__text">
    Football
    <span class="clipped"> - filter applied </span>
  </span>
</a>

Expressive Filter Chip

Replace the icon with an image and use the filter-chip--expressive modifier to create a more expressive filter chip.

Pet SuppliesPet Supplies

<button
  class="filter-chip filter-chip--expressive"
  type="button"
  aria-pressed="false"
>
  <span class="filter-chip__media">
    <img
      src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
      alt=""
    />
  </span>
  <span class="filter-chip__text"> Pet Supplies </span>
</button>
<a class="filter-chip filter-chip--expressive" href="https://www.ebay.com">
  <span class="filter-chip__media">
    <img
      src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
      alt=""
    />
  </span>
  <span class="filter-chip__text"> Pet Supplies </span>
</a>

The same rules for links apply; they require clipped text to explicitly convey that the filter is applied.

Pet SuppliesPet Supplies - filter applied

<button
  class="filter-chip filter-chip--expressive"
  type="button"
  aria-pressed="true"
>
  <span class="filter-chip__media">
    <img
      src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
      alt=""
    />
  </span>
  <span class="filter-chip__text"> Football </span>
</button>
<a
  class="filter-chip filter-chip--expressive filter-chip--selected"
  href="https://www.ebay.com"
>
  <span class="filter-chip__media">
    <img
      src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
      alt=""
    />
  </span>
  <span class="filter-chip__text">
    Football
    <span class="clipped"> - filter applied </span>
  </span>
</a>

Menu Button Chip

A filter chip can be used as the button inside of a menu button component.

<button class="filter-chip" aria-pressed="false" aria-expanded="false">
  <span class="filter-chip__text"> Sport: - </span>
  <svg class="filter-chip__trailing icon icon--12" width="12" height="12">
    <use href="#icon-chevron-down-16" />
  </svg>
</button>

When options are selected, the button label should indicate the number of selected filters.

<button class="filter-chip" aria-pressed="true" aria-expanded="false">
  <span class="filter-chip__text">
    Sport: Football
    <span class="filter-chip__count"> (+3) </span>
  </span>
  <svg class="filter-chip__trailing icon icon--12" width="12" height="12">
    <use href="#icon-chevron-down-16" />
  </svg>
</button>