COMPONENTS
Pagination
Pagination helps users navigate between large groups of content separated by pages.
Pagination gives users the ability to move forward or backward, or go directly to a specific page.
- First page button
- Previous page button
- Page hover
- Current page
- Truncation
- Last page
- Next page button
- Last page button
Additional labeling can be added for context.
Additional options can be added to allow the user to select how many records to display or to jump to a specific page.
Truncation applies when there are more than 5 to 10 pages. Ellipsis are used to indicate additional pages. Double truncation occurs when users are in the middle of a sequence of pages and there are many pages, both next and previous.
Pagination has four states available — enabled, hover, disabled or selected.
Pagination can be displayed in medium, small and x-small sizes.
Data grid pagination can have minimal or basic pagination.
- Use a single pagination component per page.
- Position pagination in the same place on each page.
Contents