Pagination
- Variants
- Default
- Basic
- Fill
Pagination allows users to browse through an ordered collection of items that has been seperated into pages.
Pagination-Default
Usage
Pagination occurs whenever content needs to be seperated over several pages and allows the user to browse through content while keeping track of their place within the content. Examples of uses of pagination are search results and viewing a list of all artices.
Design Specifications
Pagination-Default
Best practices
Do
- Used for lists with more than 25 items.
- Place at the bottom of a long list that has been split up into pages.
- Use pagination to navigate to the previous and next set of items in the paged list.
- Hint when users are at the first or the last page by disabling the corresponding button or link.
Don’t
- Use the “Extra” version in mobile, but rather have the design transform to the “Standard” or “Basic” version.
- Show more than 5 pages of search results.
- Include a “Last” button or link.
Accessibility
Pagination should have the correct size for visuals and copy to meet Schwab’s accessibility guidelines and a design that proactively supports most screen readers. Clearly describe input for users who might have visual limitations. Use appropriate text and code labels to allow quick orientation and movement between toggles.