Also known as:
Pagination separates large bodies of content into separate pages. You can access each page via a shared index of links.
- Autocomplete (not built)
- Avatar (not built)
- Button Group (not built)
- Checkbox Field
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Drawer
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Search Field (not built)
- Slider (not built)
- Split Button
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- Perform usability testing to decide where to split content into pages (that is, how much content to show per page).
- This has been designed but not built.
- Place Pagination at the bottom of the long list of content that has been split up into pages.
- Let people navigate to the Previous and Next set of items in the paged list.
- Indicate to users when they are on the first or last page by disabling the Previous or Next link.
- Where possible, load each set of items without reloading the whole page.
- Highlight the Current page as well as available pages in Pagination, such as the total number of results.
- To decide where to split content into pages, consider:
- Page and data load time
- Amount of content in each entry
- Screen real estate available
- How many items a person may need to compare at once
- Compare Pagination and Infinite Scroll with a "View more" button.
When to use
- Use Pagination when people are unlikely to need to see all the content.
- Use Pagination when the first page is enough to make a decision.
- Use Pagination when loading all the content at once would not be possible technically or not be performant. If it takes more than 10 seconds to load all the content, paginate.
- Use Pagination when keeping your place is important or you want to bookmark a specific page.
- Use Pagination when there's lot of screen real estate.
- Consider using pagination when a list contains more than 50 items of a single line of text each.
When not to use
- Avoid pagination when seeing every item and comparing them at the same time is important to the task.
- Manual pagination may be less efficient than Infinite Scroll because it may require additional cognitive load to choose a page number or pagination button.
- When we want and expect people to read more than 1 page worth of content, pagination may be disruptive to the reading experience. You might consider a "View more" button instead.
- On small and touch devices, consider using Infinite Scroll instead to avoid interrupting the flow with the need to tap a button as people scroll.
In the Comments report, we saw a sharp drop off from page 1 to page 2 when we used pagination. When we introduced question grouping and a "View more" button, we saw more viewers viewing page 2.
Here are some examples of existing design systems: