Key Points
- Pagination is stacked on small screens and displays inline on larger view ports
- There is an optional element to show different quantities of results per page
- The current Figma component is web only
Usage
When there are large collections of information that are better viewed in sets pagination should be used.
Pagination should be placed in close proximity to the collection it is controlling, this is usually located below.
By default there are specific page controls shown and this is bookended by icon buttons allowing the user to move to the previous or next page.
The number of page controls displayed is determined by the width available in the viewport, the minium would be five.
The number of items per page can be preset, or optionally controlled by the user.
The first and last page should always be displayed, a non-tappable separator can be used to show the division in steps.
File Links