Overview
Pagination or paging usually displays ‘Previous’ and ‘Next’ at the bottom of the page. This provides an organized way to flip through a defined series of web pages.
Usage guidelines
Layout
Padding around each button label is 12 pixels. Hover state brings a light grey background (#F1F1F1) and a border radius of 4 pixels.
Positioning
The pagination component is always located below the body content but above the Contact section on a web page.
Previous and next links
If the current page location is on the first page, then the ‘Previous’ link is not visible. If you go beyond page one, then the ‘Previous’ text link becomes visible. Similarly, if you are on the last page of the series, then the ‘Next’ text link is not visible.
Number of pages to display
By default, pagination lists 5 pages to save space and decrease cognitive load. The corresponding page number you currently find yourself on greys out and becomes a non-clickable link. If there are more than 5 pages in the series, you will see 3, 4, 5, 6, 7 listed if they are on page 7.
First and last links
There may be a need for 2 additional page controls – ‘First’ and ‘Last’ text links. These links will allow you to jump to the first and last pages when the following conditions are met:
- must jump to the last page (page results are in alphabetical order)
- more than 5 pages in the set
The ‘First’ link is hidden when you are on the first page, and likewise with ‘Last’ when the person is on the last page.