Pagination
A simple pagination component
Displays additional controls if there are more than five pages (first, previous, next, last). Additionally, component will be hidden if total page count is one. Note that this component doesn't do any of the actual pagination logic, it just displays buttons.
Contents
Pagination is used to divide a large amount of content into smaller bits across multiple pages and allow users to navigate through them.
Buttons to navigate forward or backward from the current page.
A clickable link that allows users to select a specific page.
An indication of the current page the user is viewing.
When the maximum number of page has been reached, the list is truncated using ellipses.
Default pagination for mobile and desktop.
Outline variant pagination for mobile and desktop.
Compact pagination displays how many items are shown on the current page out of the total number of items.
Default pagination for mobile and desktop.
Outline variant pagination for mobile and desktop.
Outline variant pagination for mobile and desktop.
Compact pagination displays how many items are shown on the current page out of the total number of items.
Compact pagination displays how many items are shown on the current page out of the total number of items.
Pagination should be placed at the bottom of the page and be visible to users.
Do
Don't
Pagination should show the last page number upfront, which helps give the user an understanding of how many pages are available in total.
Do
Don't
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.