See what's coming soon with Carbon V10-beta.

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

Pagination

Vanilla JS

  <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.