Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
Generally, pagination is used if there are more than 25 items displayed in one view.
None.
The pagination consists of:
- Page: shows the number of pages
- Arrow: allows you to go to the previous or next page
The pagination contains the states inactive, active, hover and focus.
- Page: TheSans/md/400
- Inactive page: text color Grey/4
- Active page: text color white, background-color Green/3
- Arrow: svg color Grey/4
- Hover inactive: page text color Green/3
- Hover active: page text color white, background-color Green/3
- Disabled inactive: page text color Grey/2
- Disabled active: page text color white, background-color Grey/2
- Focus: border color Ocher/5
- Page: height and width 32px
- Arrow: height and width 20px
- Arrow-left: padding-right 10px
- Arrow-right: padding-left 10px
[technical requirements]
None.
The pagination can be left, right and center aligned based on the parent. The alignment depends on the layout of the rest of elements.
Paginations should:
- Only be used for lists with more than 25 items
- Clearly identify which page the user is on by displaying the current page number
- Be placed at the bottom of a long list that has been split up into pages
- Navigate to the previous and next set of items in the paged list
- Hint when users are at the first or the last page by disabling the corresponding button
- Always show the first and last page
- Replace infinite scrolling on very long pages
Paginations should:
- Not show more than 5 pages next to each other. Instead, use the dots and show on the right the last page
Only use dots if there are more than 5 pages.
- If there are many pages and the user is on one of the first three pages, show these pages followed by the dots and then show the last page.
- If there are many pages and the user is on one of the last three pages, show the first page followed by the dots and then show the last 4 pages.
- If there are many pages, always show the active page in the middle and show the first and last page next to the dots.
Figma Design https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/