# LoadMoreButton

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/loadMore
*Captured:* 2026-04-27T14:57:19.954Z

## LoadMoreButton

### Example: Example 1

50 / 150

Load more Reset

#### React (tsx)

```tsx
import React, { useState } from 'react';

import LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';

const initialState = { loaded: 50, total: 150 };

export default () => {
    const [state, setState] = useState(initialState);

    const handleLoadMore = () => {
        const { loaded, total } = state;
        if (loaded < total) {
            setState({
                ...state,
                loaded: loaded + 50,
            });
        }
    };

    const handleReset = () => setState(initialState);

    return (
        <React.Fragment>
            <LoadMoreButton
                loaded={state.loaded}
                total={state.total}
                onLoadMore={handleLoadMore}
                loadMoreMessage='Load more'
                noMoreMessage='Everything loaded'
            />

            <button
                className='position-absolute left-0 bottom-0 margin-10 btn btn-default'
                type='button'
                onClick={handleReset}
            >
                Reset
            </button>
        </React.Fragment>
    );
};
```

#### HTML (html)

```html
<div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
    <div class="min-width-150">
        <div class="text-center margin-bottom-3">
            <span class="text-medium">50</span>
            <span class="margin-left-5 margin-right-5">/</span>
            <span class="text-medium">150</span>
        </div>
        <div class="progress height-2 margin-bottom-10 bg-white">
            <div class="progress-bar" style="width: 33.3333%;">
            </div>
        </div>
        <div class="display-flex justify-content-center">
            <button class="btn btn-link padding-right-20 margin-top--5" type="button">
                <span class="rioglyph rioglyph-arrow-down">
                </span>Load more</button>
        </div>
    </div>
</div>
<button class="position-absolute left-0 bottom-0 margin-10 btn btn-default" type="button">Reset</button>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| loaded | number | 0 | The number of already loaded elements. If set to 0 the progress bar will not be shown. |
| total | number | 100 | The number of all elements. If set to 0 the progress bar will not be shown. |
| noMoreMessage | string \| ReactNode | — | The message that will be shown when everything is loaded. |
| loadMoreMessage | string \| ReactNode | — | The text for the load more button. |
| isInteractive | boolean | true | If set to false, the button will not be rendered. The loadMoreMessage will be shown as text. |
| onLoadMore | VoidFunction | — | Callback fired when clicking on the load more button. |
| progressBarStyle | ProgressBarStyle | 'white' | In case the component is used on white background, set the progress bar style to gray. |
| className | string | — | Additional classes to be set on the wrapper element. |
| hideOnPrint | boolean | true | Hides the wrapper in print styles. |

### Example: Example 2

20 / 100

Showing limited result.
Use filters to narrow down the result.

Reset Load more

#### React (tsx)

```tsx
import React, { useState } from 'react';

import LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';

const initialState = { loaded: 20, total: 100 };

export default () => {
    const [state, setState] = useState(initialState);

    const handleLoadMore = () => {
        const { loaded, total } = state;
        if (loaded < total) {
            setState({
                ...state,
                loaded: loaded + 20,
            });
        }
    };

    const handleReset = () => setState(initialState);

    return (
        <React.Fragment>
            <LoadMoreButton
                loaded={state.loaded}
                total={state.total}
                loadMoreMessage={
                    <div className='max-width-150 text-center text-size-12 line-height-125rel'>
                        Showing limited result.
                        <br />
                        Use filters to narrow down the result.
                    </div>
                }
                noMoreMessage=''
                progressBarStyle='gray'
                isInteractive={false}
            />

            <div className='position-absolute left-0 bottom-0 margin-10 btn-toolbar'>
                <button className='btn btn-default' type='button' onClick={handleReset}>
                    Reset
                </button>
                <button className='btn btn-default' type='button' onClick={handleLoadMore}>
                    Load more
                </button>
            </div>
        </React.Fragment>
    );
};
```

#### HTML (html)

```html
<div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
    <div class="min-width-150">
        <div class="text-center margin-bottom-3">
            <span class="text-medium">20</span>
            <span class="margin-left-5 margin-right-5">/</span>
            <span class="text-medium">100</span>
        </div>
        <div class="progress height-2 margin-bottom-10 bg-lighter">
            <div class="progress-bar border border-right-only border-color-white border-width-2" style="width: 20%;">
            </div>
        </div>
        <div class="display-flex justify-content-center">
            <span class="padding-top-4 padding-bottom-10">
                <div class="max-width-150 text-center text-size-12 line-height-125rel">Showing limited result.<br>Use filters to narrow down the result.</div>
            </span>
        </div>
    </div>
</div>
<div class="position-absolute left-0 bottom-0 margin-10 btn-toolbar">
    <button class="btn btn-default" type="button">Reset</button>
    <button class="btn btn-default" type="button">Load more</button>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| loaded | number | 0 | The number of already loaded elements. If set to 0 the progress bar will not be shown. |
| total | number | 100 | The number of all elements. If set to 0 the progress bar will not be shown. |
| noMoreMessage | string \| ReactNode | — | The message that will be shown when everything is loaded. |
| loadMoreMessage | string \| ReactNode | — | The text for the load more button. |
| isInteractive | boolean | true | If set to false, the button will not be rendered. The loadMoreMessage will be shown as text. |
| onLoadMore | VoidFunction | — | Callback fired when clicking on the load more button. |
| progressBarStyle | ProgressBarStyle | 'white' | In case the component is used on white background, set the progress bar style to gray. |
| className | string | — | Additional classes to be set on the wrapper element. |
| hideOnPrint | boolean | true | Hides the wrapper in print styles. |