atomic-results-per-page

The atomic-results-per-page component determines how many results to display per page.

Introduction

The Results Per Page component determines how many results a user wants to display per page.

User Experience and Best Practices

Usage

  • Depending on if the results are in grid or list view, the user may want to change the number of results per page.

  • When using the Pager component, place the Results Per Page component below the Pager.

Guidelines

Showing just the right amount of results can be tricky because it varies depending on the use case of the search page. We don’t want to overwhelm the user with too many results, nor underwhelm with too few. Offering this control to a user allows them to determine this level of comfort for themselves.

Properties

Property Attribute Description Type Default

choicesDisplayed

choices-displayed

A list of choices for the number of results to display per page, separated by commas.

string

'10,25,50,100'

initialChoice

initial-choice

The initial selection for the number of result per page. This should be part of the choicesDisplayed option. By default, this is set to the first value in choicesDisplayed.

number | undefined

Shadow Parts

Part Description

active-button

The active result per page button.

button

The result per page button.

buttons

The list of buttons.

label

The "Results per page" label.

What's Next for Me?