Pagination
Pagination allows users to easily navigate between pages where shorter, easier-to-understand blocks of content are placed, to avoid overwhelming them.
Usage guidelines
When to use
- To split up content into different pages so it is easier for user to consume.
- To give users information about the amount of content there is to investigate and where they are located within it.
- When it will take a long time to load all the items at once. For pagination to be used, there should be enough content to be split in two pages, at least.
Specifications
Anatomy
- Back button: takes the user to the previous page and is disabled when the current page is the first.
- Current page: shows which page the user is current viewing.
- Next button: takes the user to the next page and is disabled when the current page is the last.
- Last page
- Truncation/ellipsis: indicates the hidden additional pages.
Variants
Variants featuring 2 to 5 items exist, plus a variant that displays truncation, for where there are more than 5 pages to display.
Size
Pagination comes in one size. The width of the component depends on the number of pages it contains (up to a maximum of 5 items).
Styling
Pagination is available in both light and dark theme.
By default, pagination shows a list of pages, with one being marked as the active page. The previous and next buttons are always shown.
Behavior
Positioning
- Pagination is always placed at the bottom of the page or container it is linked to.
- Pagination is positioned in the same place on each page.
You can typically find pagination in:
- Tables with large amounts of data
- Search results
- Lists of articles
Alignment
Pagination is typically centrally aligned in the paginated item.
Interaction
Pagination allows users to move forward, backward or to go directly to a specific page.
Default
The default view is on the first item, thus the left-most dot or number is active. When showing a subsequent piece of content, update the layer style of the active dot from Active to Inactive.
If the current page is the first one, the left arrow will be disabled.
Last Page
Likewise, if the current page is the last one, the right arrow will be disabled.
Accessibility guidelines
Design Considerations
- Make sure there is enough contrast between pagination color and its background.
- Pagination requires a heading element that can be hidden for sighted users.