Load more

Use the koala-load-more tag helper for paginated list "load more" buttons. Renders a button with spinner, text, and arrow icon, or a disabled state when there are no more pages.

Active state

When a next page URL is provided, the button is clickable and loads more rows.

<div koala-load-more="quote-rows" koala-load-more-url="/example"></div>

Disabled state

When no URL is provided (null), the button renders in a disabled state indicating no more results.

<div koala-load-more="quote-rows"></div>

Attributes

Tag helper attributes and their behaviour.

Attribute	Type	Description
`koala-load-more`	`string`	The rows container element ID (e.g. `"quote-rows"`). Used as the `x-target` for the AJAX load.
`koala-load-more-url`	`string?`	URL for the next page of results. When null, renders the disabled state.

How it works

Behaviour and rendering details.

Sets id="load-more" automatically on the container element.
When a URL is provided, renders an <a> link with a loading spinner, "Load more" text, and a down-arrow icon.
The link uses x-target set to the rows container ID so new rows are appended via Alpine-AJAX.
When no URL is provided, renders a disabled <span> indicating no more results are available.
The spinner appears on click and hides once the AJAX response completes.