Loading and navigating long lists

Introduction

Use pagination for most lists. It keeps users oriented, supports filtering and sorting, and makes it easy to return to a known position. For small, bounded lists where the total number of items is low, load everything at once.

A load more button works well for browsing content like news pages and notifications, where a continuous view fits the way users read. Infinite scroll should almost never be used. Only consider it if you are explicitly building a feed, such as a social or news timeline.

Pagination

Pagination splits a result set into discrete pages. Users navigate between them using page numbers or previous/next controls.

When to use: Tables, search results, admin lists, audit logs, and any task-oriented data where users need to find, filter, sort, or act on specific items.

Key considerations:

• Users always know where they are in the result set and can return to the same position after navigating away.
• Works well alongside filtering, sorting, and bulk actions.
• The URL should reflect the current page so links are shareable and the back button works as expected.

See the Pagination component for implementation guidance.

Load more

A load more button appends the next batch of results to the existing list. Users stay on one continuous page and control when more items are fetched.

When to use: News pages, notification feeds, comment threads, or similar content where a continuous view fits naturally and users are browsing rather than looking for something specific.

Key considerations:

• Show a loading state on the button while the next batch is fetching.
• The underlying API still uses pagination; this is purely a UI difference.

Button style: Use a neutral flat button and a downward arrow icon to the left of the button text. Center it below the content. This keeps the button visible without making it compete with the actual content.

Infinite scroll

Infinite scroll automatically loads the next batch of results as the user scrolls toward the bottom of the list.

Key considerations:

• There is no reliable way to return to a specific position after navigating away.
• The page footer becomes difficult or impossible to reach.
• Keyboard and screen reader users may have a poor experience.

Best practices

• Load all items when the list is small and bounded. Don't paginate a list of 12 items.
• Use pagination by default. When in doubt, paginate.
• Use load more for browsing content like news and notifications, not for task-oriented data.
• Avoid infinite scroll unless you are building a feed. Don't choose it because it looks modern.