Pagination
Pagination affords navigation between pages of content and highlights which page is currently in view.
- Previous icon button is a tertiary icon only button that lets users navigate to the previous group of items.
- Next icon button is a tertiary icon only button that lets users navigate to the next group of items.
- Active item represents the active page or group of items currently being displayed at the moment.
- Ellipsis indicates more pages in between the first three and the last one.
- Last item represents the last page or group of items.
Variation | Purpose | Underline on Item | Sizes |
|---|---|---|---|
Pagination | Use to arrange a series of elements into groups and display them one by one on separate group views. | With underline (active), no underline (default) | Single size |
Number With Underline
Add an underline below the view number when the group is being displayed.
Number With No Underline
Don’t add an underline below the view number when the group is not being displayed.
Also, when grouping with another set of components, ensure that proper space is given between the pagination component and the displayed component group. The distance between them is 24px, and items are center-aligned.
Alignment
Pagination items are center aligned within their container. The pagination component should be center aligned with content at the same level of the page should follow a center-aligned pattern.
Do center the pagination component with the displayed group of items.
Don’t left-or right align the pagination component with the group of items.
Do place the pagination component below of the displayed group of items.
Don’t place the pagination component above or at the side of the group of items being displayed.
