Use the filter-button or filter-link classes, to create a button or link styled as a filter button. Group together multiple filter buttons inside of a filter-group container.

Unselected Filter Button

By default, a filter button is in a non-selected state.

<div class="filter-group">
  <button type="button" class="filter-button">
    <span class="filter-button__cell"> Button </span>
  </button>
  <a href="https://www.ebay.com" class="filter-link">
    <span class="filter-link__cell"> Link </span>
  </a>
</div>

Selected Filter Button

Apply the aria-pressed state to a button, or filter-link--selected modifier to a link.

<div class="filter-group">
  <button type="button" class="filter-button" aria-pressed="true">
    <span class="filter-button__cell"> Button </span>
  </button>
  <a href="https://www.ebay.com" class="filter-link filter-link--selected">
    <span class="filter-link__cell">
      Link
      <span class="clipped"> - Selected </span>
    </span>
  </a>
</div>

Disabled Filter Button

Apply the disabled property or remove the href attribute to disable a button or link, respectively.

<div class="filter-group">
  <button type="button" class="filter-button" aria-pressed="false" disabled>
    <span class="filter-button__cell"> Button </span>
  </button>
  <a class="filter-link">
    <span class="filter-link__cell">
      Link
      <span class="clipped"> - Selected </span>
    </span>
  </a>
</div>

Truncated Filter Button

Long text will automatically become truncated when it reaches the maximum width.

<div class="filter-group">
  <button type="button" class="filter-button">
    <span class="filter-button__cell">
      Button with lots of text that will become truncated
    </span>
  </button>
  <a href="https://www.ebay.com" class="filter-link">
    <span class="filter-link__cell">
      Link with lots of text that will become truncated
    </span>
  </a>
</div>