Pagination
Pagination breaks down large amounts of content across a series of pages.
Show code Hide code
Usage
Pagination allows users to see total number of pages, which page they are viewing, and how to navigate to other pages.
Guidance
Do
- 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
- place pagination at the bottom of the content list to give users visibility and flexibility to move throughout the pages
- allow users to select a page number to go to that page.
Don't
- hide the first or last page number
- omit next and back controls that allow users to move forward and backward through the pages
- leave the user's current page unhighlighted.
How this component works
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.
Accessibility
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.