Skip to content

Pagination

Pagination is a control that sits at the bottom of the page and allows the user to easily move between pages. It is used when there are long sets of results, to show them on one single page, so it is easy for the user to consume large amounts of information.

Pagination is commonly used for things like table listings, search results, and directories.

Desktop

Mobile

Usage

When to use

Consider using pagination when:

  • A list contains more than 50 items of a single line of text each.
  • People are unlikely to need to see all the content, or the first page is enough to make a decision.
  • Loading all the content at once would not be possible technically or not be performant. If it takes more than 10 seconds to load all the content, paginate.
  • Keeping your place is important, or you want to bookmark a specific page.

When not to use

Consider other alternatives when:

  • If it does not improve the performance or usability of your service.
  • You’re asking the user to complete a form. Instead, use a Stepper Component.
  • Seeing every item and comparing them at the same time is important to the task.
  • Manual pagination is less efficient than Infinite Scroll.
  • We want and expect people to read more than 1 page worth of content. Pagination may be disruptive to the reading experience, so you might consider a "View more" button instead.

Design guidelines

Placement

Add the pagination component after the content on each page that you’re paginating.

Pagination should not be used only at the start of the set of data. The user would need to scroll up to go to the next page.

Sizes

Pagination can be displayed in big, standard and small size.

States

Pagination has four states available — enabled, hover, disabled or selected.

Enabled

An enabled state communicates an interactive component or element.

  1. Active: It is highlighted with a dark color to indicate the current page.
  2. Default: It is filled with white to indicate the other pages that are not the current.

Disabled

A disabled state communicates a non interactive component or element.

  1. Active: It is highlighted with a light grey color to indicate the current page with the text muted.
  2. Default: It is filled with white to indicates the other pages that are not the current with the text muted.

Hover

A hover state communicates when a user has placed a cursor above an interactive element.

  1. Active: It is highlighted with a dark color to indicate the current page. Its color doesn’t variate from the Active state when the cursor hovers over.
  2. Default: It is filled with a light color to indicate the other pages that are not the current when the cursor hovers over.

Truncation

Truncation applies when there are more than 5 to 10 pages. Ellipsis (...) are used to indicate additional pages.

Double truncation occurs when users are in the middle of a sequence of pages and there are many pages, both next and previous.

Best practices

For smaller numbers of pages

Use ‘Previous’ and ‘Next’ links to let users navigate through a small number of pages.

For larger numbers of pages

Show page numbers for:

  1. The current page
  2. Previous and next pages
  3. Ellipses (…) to replace any skipped pages.
  4. First and last pages

For current page at the start or at the end, show numbers for:

Near the start:

  1. The current page.
  2. At least one page immediately before and after the current page.
  3. Use ellipses (…) to replace any skipped pages.
  4. First and last pages.

Near the end:

  1. The current page.
  2. At least one page immediately before and after the current page.
  3. Use ellipses (…) to replace any skipped pages.
  4. First and last pages.

First and last pages

Do not enable the previous page link on the first page:

Do not enable the next page link on the last page:

Best practices

  • Use a single pagination component per page.
  • Position pagination in the same place on each page.

Do and Don'ts

Keep the user informed of what page they currently are.

Do not show pagination if there’s only one page of content.

The current page should stand out of the rest of the pages.