carbon-components/html/pagination/pagination--v2-disabled-pagination-buttons.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

  <div class="bx--pagination" data-pagination>
    <div class="bx--pagination__left">
      <div class="bx--select bx--select--inline">
          <label for="select-id-pagination" id="select-id-pagination-label"
            class="bx--pagination__text">Items per page: </label>
        <select id="select-id-pagination" aria-label="select number of items per page"
          class="bx--select-input" data-items-per-page>
            <option class="bx--select-option" value="10" >10
            </option>
        </select>
          <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
          </svg>
      </div>
      <span class="bx--pagination__text">
          <span>|&nbsp;</span>
        <span data-displayed-item-range>1-10</span> of
        <span data-total-items>40</span> items</span>
    </div>
    <div class="bx--pagination__right bx--pagination--inline">
      <span class="bx--pagination__text">
        <span data-displayed-page-number>1</span> of
        <span data-total-pages>4</span> pages</span>
      <button class="bx--pagination__button bx--pagination__button--backward"
        data-page-backward aria-label="Backward button">
          <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
            <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
          </svg>
      </button>
      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
  <div class="bx--select bx--select--inline">
    <label for="select-id-pagination" class="bx--visually-hidden">Page number</label>
    <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
        <option class="bx--select-option" value="1" >1
        </option>
    </select>
      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
      </svg>
  </div>
      <button class="bx--pagination__button bx--pagination__button--forward"
        data-page-forward aria-label="Forward button">
          <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
            <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
          </svg>
      </button>
    </div>
  </div>