Overview

Pagination allows data and content to spread across multiple screens. It’s represented as a sequence of numbers assigned to the bottom of filtered results components and filterable tables, and allows users to move or skip forward and back through these results or data.

Elements

1

3

4

6

View Code

• 1

  Number
• 2

  Previous chevron
• 3

  Next chevron
• 4

  Current page indicator
• 5

  Ellipsis
• 6

  Page range

Variations

The default number of filtered results displayed depends on the page or component pattern.

Behaviours

Up to 8 pages display at one time. With page counts of 9 and above, an ellipses appears in the middle of the sequence to indicate a hidden midpoint, and the last page is shown at the end of the sequence. The left and right chevron allow users to move page by page back and forward through the sequence. The left chevron appears when the user moves through the first sequence of pages.

Recommendations

Add content strategy guidelines and editorial rules here.