Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/segmented-buttons

DS v1

Segmented Buttons are non-form toggle buttons used in certain cases. For detailed requirements and when to use these over tabs, please visit the eBay MIND Pattern for Segmented Buttons .

The selected toggle button is toggled by aria-current="true" attribute.

NOTE: JavaScript is required to handle segmented buttons currently selected button.

Default Segmented Buttons

The default segmented button has a 40px height that matches other buttons.

Segmented Buttons - large

Use the segmented-buttons--large modifier to create large segemented buttons. These have a 48px height to match large buttons.

Segmented buttons - with icons

Any 24x24 icon can be added inside of a segmented-buttons__button-cell block.

Segmented buttons - in fixed width container

<div class="segmented-buttons">
  <ul>
    <li>
      <button
        type="button"
        class="segmented-buttons__button"
        aria-current="true"
      >
        Day
      </button>
    </li>
    <li>
      <button type="button" class="segmented-buttons__button">Month</button>
    </li>
    <li>
      <button type="button" class="segmented-buttons__button">Year</button>
    </li>
  </ul>
</div>

<div class="segmented-buttons segmented-buttons--large">
  <ul>
    <li>
      <button
        type="button"
        class="segmented-buttons__button"
        aria-current="true"
      >
        Day
      </button>
    </li>
    <li>
      <button type="button" class="segmented-buttons__button">Month</button>
    </li>
    <li>
      <button type="button" class="segmented-buttons__button">Year</button>
    </li>
  </ul>
</div>

<div class="segmented-buttons">
  <ul>
    <li>
      <button
        type="button"
        aria-current="true"
        class="segmented-buttons__button"
      >
        <span class="segmented-buttons__button-cell">
          <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
            <use href="#icon-full-view-24" />
          </svg>
          <span> Desktop </span>
        </span>
      </button>
    </li>
    <li>
      <button type="button" class="segmented-buttons__button">
        <span class="segmented-buttons__button-cell">
          <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
            <use href="#icon-mobile-24" />
          </svg>
          <span> Mobile </span>
        </span>
      </button>
    </li>
  </ul>
</div>

<div style="width: 300px">
  <div class="segmented-buttons">
    <ul>
      <li>
        <button
          type="button"
          class="segmented-buttons__button"
          aria-current="true"
        >
          Q1
        </button>
      </li>
      <li>
        <button type="button" class="segmented-buttons__button">Q2</button>
      </li>
      <li>
        <button type="button" class="segmented-buttons__button">Q3</button>
      </li>
      <li>
        <button type="button" class="segmented-buttons__button">Q4</button>
      </li>
    </ul>
  </div>
</div>