Carbon Design System

Announcement: Carbon Design System is now on Version 11.0, therefore this site and documentation is outdated. Please visit the new Carbon Design System to get the most up to date designs and code!

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

Pagination

Items per page | 1-10 of 40 items

1 of 4 pages

<!-- 
  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">
      <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>
          <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 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">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <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">
    <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>
      <input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
    <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>

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.