The load more pattern displays an initial set of results by default, then the user triggers loading more content. It is an alternate solution for pagination or infinite scrolling.
- There is 20px of spacing between end of content and the load more button.
- When the Load More indicator is a primary button, it should follow standard enterprise primary button styling.
- In cases where Load More indicator is not a primary button, it should be link text that follows standard enterprise link text styling. No caret should be used in this instance.
When Do I Use This?
Use when you want to show a user a portion of a result set by default. It is an alternative to pagination or infinite scrolling. If well executed, it has cognitive benefits over infinite scrolling, and findability and recall benefits over pagination (a user can scroll a single page to find an item vs attempting to remember which page it is on).
Compared to infinite scrolling, the user is in control of the load event, and can scroll past the "bottom" to access content below the area such as footers, or neighboring modules.
Compared to inline expand, the user has no ability to collapse. Use accordingly.
1. On click, more of a content set is is displayed to the user.
From one to infinite "load" triggers are allowed.
2. Use a button or link at the bottom of the content area.
Do not use a caret as part of the trigger element because no "hide" functionality exists, as in Inline expand.
3. Copy Guidelines for Load More
Do: read more, show more products, show all orders, show more, view more
Don't: see more, see details, learn more. Anything w/ caret.
Load more is an acceptable variation of Infinite scrolling. Infinite scrolling presents a number of usability, accessibility and SEO issues. When implemented properly, load more offers a similar solution. To ensure minimal negative impact on users with disabilities including those who use assistive technology, the pattern code base must meet the following criteria:
- Focus is not lost when navigating back
- Ability to access footer content
- Ability to quickly navigate through all of the content
- No difficulty locating content
- Ability to get to the end of the page easily
Informed by an SHC audit to review all example uses, followed by efforts to clarify and provide distinct patterns for each use case - see all expand/collapse. Trigger styling and copy maintain a few minor cues to make its utility distinct from Inline expand:
- The trigger is aligned center to communicate to the user that additional rows will be added. In a small real estate scenario, it can be left or right aligned to the content above.
- Caret should be avoided because no "hide" functionality exists, as in Inline expand.
Use terms like show more, load more, show all products, view more; ideally with a noun like products, orders, etc ... and avoid the use of the following terms: "see details" (used for legal), "learn more" (used for page turns, or layers/modals), "view all", or "see more" without a noun (ambiguous use cases)...in order to keep the utility of the element clear. The user should get the impression they are triggering the system to display more of whatever is already being displayed.