Split Button Component

<span class="split-button">
  <button class="btn btn--primary btn--split-start" type="button">
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
    </span>
  </button>
  <span class="menu-button">
    <button
      class="btn btn--primary btn--split-end"
      aria-haspopup="true"
      type="button"
    >
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </button>
    <div class="menu-button__menu menu-button__menu--reverse">
      <div class="menu-button__items" role="menu">
        <div class="menu-button__item" role="menuitem">
          <span> Item 10000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 20000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 30000 </span>
        </div>
      </div>
    </div>
  </span>
</span>

Note the usage of btn--split-start to denote the start of a split button sequence, and btn--split-end to denote its end.

Secondary Split Button

Use the secondary modifiers to create a secondary split button style.

<span class="split-button">
  <button class="btn btn--secondary btn--split-start" type="button">
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
    </span>
  </button>
  <span class="menu-button">
    <button
      class="btn btn--secondary btn--split-end"
      aria-haspopup="true"
      type="button"
    >
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </button>
    <div class="menu-button__menu menu-button__menu--reverse">
      <div class="menu-button__items" role="menu">
        <div class="menu-button__item" role="menuitem">
          <span> Item 10000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 20000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 30000 </span>
        </div>
      </div>
    </div>
  </span>
</span>

Tertiary Split Button

Use the tertiary modifiers to create a tertiary split button style.

<span class="split-button">
  <button class="btn btn--tertiary btn--split-start" type="button">
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
    </span>
  </button>
  <span class="menu-button">
    <button
      class="btn btn--tertiary btn--split-end"
      aria-haspopup="true"
      type="button"
    >
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </button>
    <div class="menu-button__menu menu-button__menu--reverse">
      <div class="menu-button__items" role="menu">
        <div class="menu-button__item" role="menuitem">
          <span> Item 10000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 20000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 30000 </span>
        </div>
      </div>
    </div>
  </span>
</span>

Fake Split Button Primary

<span class="split-button">
  <a
    class="fake-btn fake-btn--primary fake-btn--split-start"
    href="https://ebay.com"
  >
    link
  </a>
  <span class="menu-button">
    <button
      class="btn btn--primary btn--split-end"
      aria-haspopup="true"
      type="button"
    >
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </button>
    <div class="menu-button__menu menu-button__menu--reverse">
      <div class="menu-button__items" role="menu">
        <div class="menu-button__item" role="menuitem">
          <span> item 10000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> item 20000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> item 30000 </span>
        </div>
      </div>
    </div>
  </span>
</span>

Fake Split Button Secondary

<span class="split-button">
  <a
    class="fake-btn fake-btn--secondary fake-btn--split-start"
    href="https://ebay.com"
  >
    Link
  </a>
  <span class="menu-button">
    <button
      class="btn btn--secondary btn--split-end"
      aria-haspopup="true"
      type="button"
    >
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </button>
    <div class="menu-button__menu menu-button__menu--reverse">
      <div class="menu-button__items" role="menu">
        <div class="menu-button__item" role="menuitem">
          <span> Item 10000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 20000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 30000 </span>
        </div>
      </div>
    </div>
  </span>
</span>

Fake Split Button Tertiary

<span class="split-button">
  <a
    class="fake-btn fake-btn--tertiary fake-btn--split-start"
    href="https://ebay.com"
  >
    Link
  </a>
  <span class="menu-button">
    <button
      class="btn btn--tertiary btn--split-end"
      aria-haspopup="true"
      type="button"
    >
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </button>
    <div class="menu-button__menu menu-button__menu--reverse">
      <div class="menu-button__items" role="menu">
        <div class="menu-button__item" role="menuitem">
          <span> Item 10000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 20000 </span>
        </div>
        <div class="menu-button__item" role="menuitem">
          <span> Item 30000 </span>
        </div>
      </div>
    </div>
  </span>
</span>