Koala logo Design
Overview Colours Typography Icons Dark mode Avatar pickers Avatars Badges Breadcrumbs Buttons Cards Empty states Hoowla link Nav items Stat cards Steppers Sticky headers Switchers Tables Tabs Timelines Charts Load more Rich text Tooltips Action menus Forms Autocomplete Modals Notifications Side trays Confetti Guided tour Period filters

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.