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

    Down Arrow

    Use for pagination at the bottom of lists.


    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

    • 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