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.

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

Events

Pagination events

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

---

Related components

• To see how pagination is used on a page, see the page component
• To add primary and secondary calls to action at the bottom of a page, see the page actions component
• The resource list component is often combined with pagination to handle long lists of resources such as orders or customers
• To create stand-alone navigational links or calls to action, use the button component
• To embed actions or pathways to more information within a sentence, use the link component