Pagination

The pagination component provides a way to navigate between discrete pages of a single subject.

Structure

Elements

  1. Pagination item
  2. Disabled navigation arrow
  3. Enabled navigation arrow
  4. Pagination text

Pagination item

Pagination items are represented by a filled circle and are displayed when there are five or fewer pages within a view.

Pagination text

To conserve space, pagination text is displayed when there are six or more pages within a view.

In most situations, the maximum number of items displayed per page should be 20.

Behavior

States

Active

The active state informs the user of which page is currently visible using a different coloration of the pagination item. This state isn’t present when pagination text is displayed; instead, the page number should accurately reflect which page you are on out of how many total pages.

Disabled

The previous page navigation arrow should be disabled when the first page is active. Likewise, the next page navigation arrow should be disabled when the last page is active.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
bodyTextPrimaryColor

Dark text color used for primary content in layouts

#071523FF
dividerDefaultColor

Default fill for dividers in the app

#E6E6E6FF
linkButtonTextColor

Simple hyperlink like buttons with text that that is intended to display on primary or secondary content backgrounds

#2A73A8FF