Pagination

Use pagination to allow navigation between pages that represent an ordered collection of items.

Examples

Use for pagination at the bottom of lists.

Drag to resize example

Props

accessibilityLabel
string
Accessible label for the pagination
hasNext
boolean
Whether there is a next page to show
hasPrevious
boolean
Whether there is a previous page to show
nextURL
string
The URL of the next page
plain
boolean
A more subdued control for use in headers
previousURL
string
The URL of the previous page
onNext
() => void
Callback when next button is clicked
onPrevious
() => void
Callback when previous button is clicked

Best practices

Pagination should:

  • Be placed at the bottom of a long list that has been split up into pages
  • Navigate to the previous and next set of items in a paged list
  • Be placed in the page header on detail pages (e.g. detail page for a product or order)
  • Navigate to the previous and next object of the same type (e.g. product or order) on a detail page
  • Hint when the merchants is at the first or the last page by disabling the corresponding button

Content guidelines

There are no editable content elements that are specific to the pagination component.