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

1-10 of 40 items

  <div class="bx--pagination" data-pagination>

    <div class="bx--pagination__left">
      <div class="bx--select bx--select__item-count">
        <select id="select-id-pagination-count" aria-label="select number of items per page" tabindex="0" class="bx--select-input"
        data-items-per-page>
          <option class="bx--select-option" value="10"  selected>
            10  items per page
          </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="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
      </div>
      <div class="bx--pagination__text">
        <span data-displayed-item-range>1-10</span> of
        <span data-total-items>40</span> items
      </div>
    </div>

    <div class="bx--pagination__right">
      <div class="bx--select bx--select__page-number">
        <select id="select-id-pagination-page" aria-label="select page number to view" tabindex="0" class="bx--select-input" data-page-number-input>
            <option class="bx--select-option" value="1"  selected>
              1  of 5 pages
            </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="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
      </div>

      <button class="bx--pagination__button bx--pagination__button--backward" tabindex="0" data-page-backward aria-label="Backward button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="24" height="24" 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="Forward button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="24" height="24" 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.