BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Pagination

Appears at the bottom of each page when more data exists than fits on the page and/or that data is too long for scrolling.

Overview

The pagination pattern appears below a table, centered within the table container. It is used when the table contains more records than can fit within a single page and overflow is required. The Pagination pattern must be used in conjunction with a dropdown allowing the user to change the number of results shown within the table.

UX Best Practice: A table should introduce pagination when the record set is greater than 25.

Sample desktop view only. Not to scale.

table type 2

Structure

  • • The active page is indicated with the dark blue circle.
  • • Other pages are indicated with the gray circle that changes on hover.
  • • The circles used for navigating are indicated with a white circle, that changes on hover.

7 pages or less

No “previous page” or “next page” arrow buttons.

1
2
3
4
5
6
7

8 or more pages

The number 7 button becomes the “next page” arrow button.


Examples: 10 pages of results

  • • Clicking the “next page” arrow button takes the user to the next set of pages.


1
2
3
4
5
6
...


  • • The number 1 page button moves to the first position, so users can easily return to the first set of results.
  • • The “previous page” arrow button appears next to the number 1 button.



1
...
7
8
9
10

10 or more pages

“Previous page” and “next page” arrow buttons appear.

1
...
7
8
9
10
...