Load More
加载更多
A "Load more" button at the bottom of a list that appends another batch when tapped.
Live Demo
Actually clickableWhat you just saw:The "Read more" button at the end of an article, "View more replies" under a comment thread, "Load more results" at the bottom of a search results page.
What it actually is
Load more is the compromise between pagination and infinite scroll: it keeps the user in control (nothing interrupts them) while not breaking browsing (no jump to a new page). Its weakness is that users may never tap it.
Anatomy · What it's made of
Trigger触发按钮
Text button, centered or full-width
Loading加载态
Spinner inside the button
Append追加
New content joins the end
End Note到底提示
"No more results"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Content is long but does not need page jumps | Yes |
| You want to avoid the interruption of infinite scroll | Yes |
| Users should control the pace of loading themselves | Yes |
| Content is linear reading (articles, comments) | Yes |
| There is a lot of data and users need to jump to a specific page | No |
With a lot of content, "Load more" may never be tapped — at that point just use infinite scroll.
Keep the scroll position from jumping after loading, otherwise users lose their place.
Similar Patterns
Don't mix these upLoad MoreCurrent
加载更多
A "Load more" button at the bottom of a list that appends another batch when tapped.
Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
In one line:A "Load more" button at the bottom of a list that appends another batch when tapped.
Pagination
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a "Load more" button at the bottom of a list: on click the button shows loading and is disabled, 20 more items are appended, the scroll position does not jump, and once everything is loaded it shows "You have reached the end".
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a load more button at the bottom.
Say this instead
Add a "Load more" button at the bottom of a list: on click show loading and lock against repeat clicks, append content while keeping the scroll position from jumping, replace the button with "You have reached the end" once everything is loaded, and use skeletons for the first load.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.