Pagination
Pagination allows the user to navigate multiple pages of content.
Breakdown
Page link pagination (Large device)
If you want to prevent users from skipping pages, you may hide the page numbers and only show the previous and next page links.
Previous Page: Page Link
Next Page: Page Link
Page link pagination (Small device)
On smaller devices the page link sits below the previous and next labels.
Previous Page: Page Link
Next Page: Page Link
Usage
The default pagination component shows pagination arrows and the current page number so that users know where they are and get a visual confirmation when they navigate to another page.
Pagination changes depending on device to give the user a greater clickable and tappable area.
- Previous page: Links to the page before the current page.
- Next page link: Links to the page after the current page.
- Page numbers: Lets users skip to another page.
- Current page: The user is on right now, indicated by a colour change.
Typography
Default pagination uses lead typography styling.
Horizontal gap
Default pagination buttons have a 9px horizontal gap between each button.
Accessibility
You should use a label prop in all lists. The label will be announced by assertive technologies such as a screenreader. This device describing the purpose or contents of the list.
