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
label
React.ReactNode
Text to provide more context in between the arrow buttons
nextKeys
Key[]
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
Key[]
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

Pagination with label

Add a label between navigation buttons to provide more context of the content being viewed by the user.

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

Pagination with label

Add a label between navigation buttons to provide more context of the content being viewed by the user.

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 merchants are at the first or the last page by disabling the corresponding button

iOS and Android pagination should:

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

Edit source on GitHub · Preview examples in Chromatic