Pagination

Code:
<!-- 
  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">
      <label id="select-id-pagination-count-label"
        class="bx--pagination__text"
        for="select-id-pagination-count">
        Items per page:
      </label>
      <div class="bx--select bx--select--inline bx--select__item-count">
        <select class="bx--select-input"
          id="select-id-pagination-count"
          aria-label="Items per page" tabindex="0" data-items-per-page>
            <option class="bx--select-option" value="10">
              10
            </option>
            <option class="bx--select-option" value="20">
              20
            </option>
            <option class="bx--select-option" value="30">
              30
            </option>
            <option class="bx--select-option" value="40">
              40
            </option>
            <option class="bx--select-option" value="50">
              50
            </option>
        </select>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </div>
      <span class="bx--pagination__text">
        <span data-displayed-item-range>1–10</span> of
        <span data-total-items>
            40
        </span> items
      </span>
    </div>
    <div class="bx--pagination__right">
      <div class="bx--select bx--select--inline bx--select__page-number">
        <select class="bx--select-input"
          id="select-id-pagination-page"
          aria-label="page number, of 5 pages" tabindex="0" data-page-number-input>
            <option class="bx--select-option" value="1">
              1
            </option>
            <option class="bx--select-option" value="2">
              2
            </option>
            <option class="bx--select-option" value="3">
              3
            </option>
            <option class="bx--select-option" value="4">
              4
            </option>
            <option class="bx--select-option" value="5">
              5
            </option>
        </select>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </div>
      <label id="select-id-pagination-page-label"
        class="bx--pagination__text"
        for="select-id-pagination-page">
        of 5 pages
      </label>
      <button
        class="bx--pagination__button bx--pagination__button--backward "
        tabindex="0" data-page-backward aria-label="previous page">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23l-8-7 8-7v14z"></path></svg>
      </button>
      <button
        class="bx--pagination__button bx--pagination__button--forward "
        tabindex="0" data-page-forward aria-label="next page">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9l8 7-8 7V9z"></path></svg>
      </button>
    </div>
  </div>

Pagination disabled buttons

Vanilla JS
Code:
<!-- 
  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">
      <label id="select-id-pagination-count-label--disabled-example"
        class="bx--pagination__text"
        for="select-id-pagination-count--disabled-example">
        Items per page:
      </label>
      <div class="bx--select bx--select--inline bx--select__item-count">
        <select class="bx--select-input"
          id="select-id-pagination-count--disabled-example"
          aria-label="Items per page" tabindex="0" data-items-per-page>
            <option class="bx--select-option" value="10">
              10
            </option>
        </select>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </div>
      <span class="bx--pagination__text">
        <span data-displayed-item-range>1–10</span> of
        <span data-total-items>
            10
        </span> items
      </span>
    </div>
    <div class="bx--pagination__right">
      <div class="bx--select bx--select--inline bx--select__page-number">
        <select class="bx--select-input"
          id="select-id-pagination-page--disabled-example"
          aria-label="page number, of 1 pages" tabindex="0" data-page-number-input>
            <option class="bx--select-option" value="1">
              1
            </option>
        </select>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </div>
      <label id="select-id-pagination-page-label--disabled-example"
        class="bx--pagination__text"
        for="select-id-pagination-page--disabled-example">
        of 1 pages
      </label>
      <button
        class="bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"
        tabindex="0" data-page-backward aria-label="previous page">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23l-8-7 8-7v14z"></path></svg>
      </button>
      <button
        class="bx--pagination__button bx--pagination__button--forward bx--pagination__button--no-index"
        tabindex="0" data-page-forward aria-label="next page">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9l8 7-8 7V9z"></path></svg>
      </button>
    </div>
  </div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--pagination__button class.

Selector Description
.bx--pagination__button--backward Applies styles for backward button
.bx--pagination__button--forward Applies styles for forward button
.bx--pagination__button--no-index Applies styles for disabled button

JavaScript

Options

Option Default Selector Description
selectorInit [data-pagination] The selector to find the pagination
selectorItemsPerPageInput [data-items-per-page] The selector to find the input that determines the number of items per page.
selectorPageNumberInput [data-page-number-input] The selector to find the input that changes the page displayed.
selectorPageBackward [data-page-backward] The selector to find the button that goes back a page.
selectorPageForward [data-page-forward] The selector to find the button that goes forward a page.

Events

Name Default Value Description
eventItemsPerPage itemsPerPage Custom event fired when a user changes the number of items per page. event.detail.value contains the number of items a user wishes to see.
eventPageNumber pageNumber The name of the custom event fired when a user inputs a specific page number. event.detail.value contains the value that the user input.
eventPageChange pageChange The name of the custom event fired when a user goes forward or backward a page. event.detail.direction contains the direction a user wishes to go.