atomic-pager

This is for:

Developer

The atomic-pager provides buttons that allow the end user to navigate through the different result pages.

Introduction

The pager component provides buttons that allow the user to navigate through the different result pages, when there’s more than one page of results. A Pager is useful for datasets that are highly specific and may require a user to navigate and take note of a particular page for comparison.

User Experience and Best Practices

Usage Notes

  • If you want to encourage your users to reformulate or refine their query when they don’t see their desired results on the first page, use a pager.

  • When the items in a source are very specific, a pager gives the user more control and ability to compare results across pages.

  • A Pager component is helpful in giving the user a sense of how many results there are in their query and how far they want to dig into those results.

Guidelines

Don’t use a pager when you want your users to browse a product list, using a "Load more" component offers a more seamless experience. Do provide control to your user over how many results they want to display per page.

Use Cases and Examples

Considering Google, they provide a pagination on the bottom of the page, but we seldom use that because the answer is often at the top. However, if the items in a result set are highly specific, a pager helps a user keep track of the location of a specific result. A catalog of parts or services that only slightly differ from one another would benefit from a Pager over a Load More button.

Reference

Pagination vs. Infinite Scroll vs. Load More Explained

Properties

Property Attribute Description Type Default

nextButtonIcon

next-button-icon

The SVG icon to use to display the Next button.

  • Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.

  • Use a value that starts with assets://, to display an icon from the Atomic package.

  • Use a stringified SVG to display it directly.

string

ArrowRightIcon

numberOfPages

number-of-pages

Specifies how many page buttons to display in the pager.

number

5

previousButtonIcon

previous-button-icon

The SVG icon to use to display the Previous button.

  • Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.

  • Use a value that starts with assets://, to display an icon from the Atomic package.

  • Use a stringified SVG to display it directly.

string

ArrowLeftIcon

Shadow Parts

Part Description

active-page-button

The active page button.

buttons

The list of the next/previous buttons and page-buttons.

next-button

The next button.

next-button-icon

Icon of the next button.

page-button

The page button.

page-buttons

The list of page buttons.

previous-button

The previous button.

previous-button-icon

Icon of the previous button.