Skip to main content

Pagination

Usage

The Pagination Component is a set of controls that gives a user the ability to navigate a large set of items when they can't be displayed on a single page.

Common Characteristics

The pagination component only appears at the bottom of a long list of items. (e.g. a search results page, or runlist). It is horizontally centered with the list column, not the whole page.

The pagination control appears the same at every breakpoint and allows the user to navigate to the first page, a previous page, and a next page. The user also has access to a limited set of numbered pages.

Live Editor
Result
Loading...

Usage Guidelines

Hide the pagination control when there is only one page of list items (governed by the results per page setting).

Display the pagination component only at the bottom of a list of items. It should be centered with the listings, not the page width.

Code

Live Editor
Result
Loading...

The props currentPage and totalPages are required by the component.

Providing a callback to the onChange property will allow the application author to see the previously selected index and the newly selected index, identified as prevIndex and index respectively.

Props

NameTypeDefaultDescription
currentPagenumber1Sets the current page number
totalPagesnumber1Sets the total number of pagination pages
onChangefunctionnullSets the function called when the navigating to page numbers