Components Load more

Load more

Pagination button at the foot of a list. Renders a bouncing arrow when there's another page, a spinner while fetching, or a muted "All loaded" when exhausted.

<koala-load-more>

Canonical

<div koala-load-more="quote-rows" koala-load-more-url="@Model.NextPageUrl"></div>

Sits at the foot of a paginated list. Click GETs the next page and appends rows via Alpine-AJAX into the target id(s).

Variants

2 variants

Active

koala-load-more-url="/next"

No more results

Disabled

koala-load-more-url omitted

States

3 states

Idle

Disabled (all loaded)

Props

5 attributes

Attribute	Values	Notes
koala-load-more	target id(s)	Required. Space-separated `x-target` ids; a single id pairs with `load-more`.
koala-load-more-url	string?	Next-page URL. Null renders the disabled state.
koala-load-more-id	string	Wrapper id. Default `load-more`. Unique per page when multiple coexist.
koala-load-more-scroll-target	string?	Element to scroll to bottom of after new rows arrive.
koala-load-more-class	string	Override wrapper class. Default is shared list-footer style.

Do & don't

Do Append new rows to the existing list. Cursor pagination, no full page reload, no jumping the scroll.

…

Don't Don't reach for numbered pagination. The codebase uses cursor + load-more everywhere — consistency beats deep-jump.