Components menu
  2. components
  3. navigation
  4. pagination

Pagination

Use pagination to let merchants move through an ordered collection of items that has been split into pages. On the web, pagination uses buttons to move back and forth between pages. On iOS and Android, pagination uses infinite scrolling.

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
nextKeys
Keys[]
Keyboard shortcuts for the next button
nextTooltip
string
Tooltip for the next button
nextURL
string
The URL of the next page
plain
boolean
A more subdued control for use in headers
previousKeys
Keys[]
Keyboard shortcuts for the previous button
previousTooltip
string
Tooltip for the previous button
previousURL
string
The URL of the previous page
onNext
() => void
Callback when next button is clicked
onPrevious
() => void
Callback when previous button is clicked

Infinite scroll

Use for lists longer than 25 items. In mobile apps it’s natural to scroll to the bottom of the screen to load more items.

Infinite scroll pagination on Android

Infinite scroll

Use for lists longer than 25 items. In mobile apps it’s natural to scroll to the bottom of the screen to load more items.

Infinite scroll pagination on iOS

Best practices

On all platforms, pagination should:

  • Only be used for lists with more than 25 items

Web pagination should:

  • Be placed at the bottom of a long list that has been split up into pages
  • Pagination should navigate to the previous and next set of items in the paged list
  • Hint when the merchants is at the first or the last page by disabling the corresponding button

iOS and Android pagination should:

  • Start loading items when the merchant is close to the bottom, roughly 5 items from the end
  • Show a spinner below the list to indicate that items have been requested

Content guidelines

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