This is for:


The atomic-load-more-results component allows the user to load additional results if more are available.


This component allows a user to load more results when they reach the bottom of a page, assuming there are more results. This approach offers a smoother and more intuitive browsing experience, as there’s no “page reload”.

User Experience and Best Practices

Usage Notes

  • The Load More Results component is especially useful when you want your user to browse more results, rather than return to and refine facets or reconsider their query.

  • When the items in a source are highly specific, a pager is a more appropriate component.


Users browse longer than with Load more than with Pagination. Load more is less effective when the items in a source are very specific and require comparison.

Use Cases and Examples

On an ecommerce site, users will view more products using a Load More button then with a Pager. When considering designing for mobile, a Load More button is a better experience for the user.

Shadow Parts

Part Description


The container of the component.


The highlighted number of results displayed and number of results available.


The "Load more results" button.


The progress bar displaying a percentage of results shown over the total number of results available.


The ripple effect of the component’s interactive elements.


The summary displaying which results are shown and how many are available.

CSS Custom Content

Name Description


Color of the start of the gradient for the load more results progress bar.


Color of the end of the gradient for the load more results progress bar.