1 min read



Component that renders a text with the number of rendered results and the remaining ones and a <BaseEventButton> with the logic of emitting the event "UserReachedResultsListEnd" to load more results on click.


Name Description Type Default
buttonClasses CSS classes to customize the loader button. VueCSSClasses ''
buttonEvents Events to customize what will be emitted by the loader button. Partial<XEventsTypes>


Name Description Bindings
(name - type - description)
default default resultsLength number - The search result's length
totalResults number - The totalResults of a searched query
textContent Rendered count with a text and the number of results displayed & remaining.
buttonContent Button content with a text, an icon or both None


This component emits the "UserReachedResultsListEnd" event by default. This can be changed using the buttonEvents prop:

See it in action

Here you have a basic example of how the page loader component is rendered.

Customise the default layout

This component has a default slot which allows to customise the entire layout.

Customise the slots

This component allows to customise both the textContent and the buttonContent slots. The textContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping content inside and customizing its style using the buttonClasses prop.