Pagination allows users to see total number of pages, which page they are viewing, and how to navigate to other pages.
Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming.
Consider using pagination when a listing exceeds 10 results. Letting the user know on which page a particular piece of information is available makes it easier for them to find it again.
Placement
Pagination is placed at the bottom of the content list to give users visibility and flexibility to move throughout the pages.
Controls
The next and back controls allow users to easily move forward and backward through the pages and selecting a page number takes a user to that page. The first and last page number should always show and a user’s current page is always highlighted.
Disabled and active states
Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.