Anatomy
- Previous navigation: Navigation control to move to the previous page
- Current page: The current page number
- Total pages: The total number of pages
- Next navigation: Navigation control to move to the next page.
Usage Guidelines
When to use this component
- When displaying all the content at once would significantly impact page performance and user experience
- For content that benefits from sequential browsing, such as search result. “Page 3” is easier to revisit than “somewhere in a long scroll”
- When the content has structure and the pages create clear grouping
- When users needs to be able to scroll beyond the content or real estate is limited and showing all content would create overwhelming or unusable interfaces
When not to use this component
- For step-by-step processes, forms, or wizards where users need to complete tasks in sequence
- When infinite scrolling is more appropriate. For example:
- Content galleries and social feeds
- Users don’t have a specific target — they’re just exploring
-
When the list does not have a natural end
Best Practices
Use pagination for content that benefits from sequential browsing.
Do not rely exclusively on Pagination for navigation purposes. Consider providing a search, filters, or any other method to locate the data.
Use pagination when users need to scroll beyond the content.
General Component Behaviors
Sequential navigation
Previous and Next buttons provide one-step navigation in either direction. These buttons automatically disable when users reach the first or last page respectively.
Placement
The component will always be located below the content being paginated, surrounded by --w-space-m and center-aligned.
States
The previous and next buttons appear opaque when the current page is at the lower- or upper end of the range respectively.
