Pagination
v2.1
Pagination breaks large data sets into multiple pages for easier consumption. Controls are included to navigate between pages and manage how much content is shown at once. This is primarily an HTML pattern.
- Skin
- Marko
- React
There is an absolute maximum of 7 visible slots available, including the overflow element if pages are truncated. On smaller screens, more pages will be truncated as the screen width decreases. When pages are truncated, the minimum is 5 slots visible. Avoid showing pagination if only 1 page exists.
The leading overflow appears when there are at least 2 pages between the last page and the page before the overflow.
The trailing overflow appears when navigating within the last 4 pages and will contain a minimum of 2 pages.
Both the leading and trailing overflow appear when there are at least 3 pages ahead and behind the active page, excluding the first and last page.
If space permits, it is recommended to pair pagination with a dropdown controlling the results per page.
Interacting with the overflow element reveals a popover menu.
We recommend avoiding pagination on small screens and native applications. Use an infinite scroll pattern instead to allow users to load content on demand.
Use pagination where infinite scroll or load more patterns aren’t appropriate.
Pagination breaks up large, overwhelming amounts of data into consumable chunks.
Interactions are quick and easy within a tap or two.
Pagination provides a clear distinction of the current page within a data set.
Do use pagination when there are more than 20 items.
Don’t show pagination if all items are visible on one page.
