Previous and next buttons: Allows users to go backward or forward a page, can be text or icon, can be used individually depending on situation and space constraints.
Numbering: Allow users to skip to different pages anytime.
Truncation: When a threshold of pages is reached, the list is truncated using an ellipsis.
Within the pagination
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing. Base height 48px.
Pagination should be used when:
Long content can be separated into multiple pages that can be navigated sequentially or by selecting a specific page within the pagination set.
Pagination should not be used when:
The page has infinite scrolling, i.e. loading data as the user scrolls down the page.
The content is not part of the same set, consider using navigation instead.
Switching between slides or content in a carousel.
Show the total number of pages in the pagination set whenever possible
Users should know the total number of pages or items. Truncation can be used when the number of pages exceeds the pagination display limit.
Highlight the current page
Pagination should highlight the page the user is currently on.
Place pagination at the bottom of the set of results
Do place pagination at the bottom of page so that users are able to navigate between pages.