Provide pagination control to browse from page to page. Let the user browse to the previous and next pages by providing links to such actions.
The standard style
Pagination This component defines the standard visual style for the pagination element.
Usage Guidelines
Pagination provides the user with a natural break from reading or scanning the contents of the dataset, and allows them to re-evaluate whether they wish to continue looking through more data, or navigate away from the page.
Features
Documents
Provide pagination control to browse from page to page. Let the user browse to the previous and next pages by providing links to such actions.
The standard style
A simple alternative version of pagination style.
The compact style
| Spacing | Page number and arrow buttons: min-width of 44px, height of 44px |
| Ellipses: width 32px , height 44px | |
| An underline appears 6px below the text | |
| Typography | Default text is UI Text - Basic |
| Normal page style | UI Text - Basic |
| Medium Gray | |
| Selected style | UI Text - Bold |
| 2px underline | |
| Text and underline are Charcoal | |
| Hover style | Add a Medium Gray, 2px underline to the normal style |
| Focus | Use the browser default focus outline |
| Also use the hover style | |
| Icons | chevron-next-sm-18 |
| chevron-back-sm-18 | |
| ellipsis-18 | |
| Arrows | Forward/Back arrow are inside a 28px diameter concrete circle |
| Spacing | Next/Prev buttons are 12px from the current location |
| Location info | Uses UI Text - Basic style |
| Should either say "Page X of Y" or current range: "X – Y of Z" |
Initial version