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
<Pagination
  hasPrevious
  onPrevious={() => {console.log('Previous')}}
  hasNext
  onNext={() => {console.log('Next')}} />
Name
Type
Description
plain
boolean
A more subdued control for use in headers
nextUrl
string
The URL of the next page
previousUrl
string
The URL of the previous page
hasNext
boolean
Whether there is a next page to show
hasPrevious
boolean
Whether there is a previous page to show
onNext
function
Callback when next button is clicked
onPrevious
function
Callback when previous button is clicked

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Long pages or lists of information can be overwhelming and hard to navigate. Alternatively, it can be a convenience to jump between objects related to each other in a sequence.

Solution

Pagination helps to break up long sections of information. Alternatively, pagination provides a shortcut to navigate between pages when they represent items within a collection.


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.