Pagination

v2.1

Pagination breaks large data sets into multiple pages for easier consumption. Controls are included to navigate between pages and manage how much content is shown at once. This is primarily an HTML pattern.

Considerations

Consumable

Pagination breaks up large, overwhelming amounts of data into consumable chunks.

Simple

Interactions are quick and easy within a tap or two.

Distinct

Pagination provides a clear distinction of the current page within a data set.

Anatomy

Properties

Behavior

Platforms

Best practices

Specs

A detailed spec of the pagination controls. From left to right reads left arrow button with a width of 32px, 8px of space, page 1 with a width of 44px, 32px overflow button centered in a width of 44px, page 43 with a width of 44px, selected page 44 with a width of 44px, page 45 with a width of 44px, active 32px overflow button with a popover containing the numbers 6–10 with 4px between the overflow and button, page 80 with a width of 44px, 8px of space, and right arrow button with a width of 32px.