---
title: "Load more with a button · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/lists-and-tables/load-more-button
updated: 2026-10-20
licence: "All rights reserved"
---

# Load more with a button

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Lists and tables](https://agentwranglers.se/playbook/app-ui/lists-and-tables)
- Rule: Load further results with page links or a "Load more" button, not endless scrolling. After loading, move focus to the first new item.
- How: Endless scrolling hides the footer, loses the position on Back and is hard to use by keyboard. Put the cursor in the address, as [state in the address](https://agentwranglers.se/playbook/app-ui/client-and-server-state/state-in-url) describes, so Back and reload return to the same place. Say how many items are shown, such as "Showing 100 of 2,340". Give each new item `tabindex="-1"` before focusing it.
- Check: A browser test presses "Load more" with the keyboard. The new items appear, focus is on the first new one, and the footer can still be reached.

Example:

```ts
export async function loadMore(list: HTMLElement, button: HTMLButtonElement) {
  const page = await api.get(button.dataset.next!);
  const items = page.items.map(renderItem);
  list.append(...items);
  items[0]?.setAttribute('tabindex', '-1');
  items[0]?.focus();
  page.nextCursor ? (button.dataset.next = `/api/orders?cursor=${page.nextCursor}`) : button.remove();
}
```

```python
@app.get("/orders/more")
def more_orders():
    page = orders.list(current_user().account_id, cursor=request.args.get("cursor"), limit=PAGE_SIZE)
    return render_template("orders/_more.html", page=page)
```

```html
<!-- orders/_more.html: rows plus a new button, swapped in place of the old one -->
<button hx-get="/orders/more?cursor=c_9f2" hx-target="this" hx-swap="outerHTML" hx-push-url="/orders?cursor=c_9f2">Load more</button>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/lists-and-tables/load-more-button`.

- Previous: [Never render thousands of rows](https://agentwranglers.se/playbook/app-ui/lists-and-tables/bounded-lists)
- Next: [Sort and filter on the server](https://agentwranglers.se/playbook/app-ui/lists-and-tables/server-sort-and-filter)
- [Lists and tables](https://agentwranglers.se/playbook/app-ui/lists-and-tables)