# Pager

*Category:* Components
*Section:* Navigation
*Source:* https://uikit.developers.rio.cloud/#/components/pager
*Captured:* 2026-04-27T14:57:13.545Z

## Pager

### Example: Example 1

Pager with label

Previous
The previous chapter

Next
The next chapter

Compact Pager without label

Previous

Next

#### React (tsx)

```tsx
import { Title } from '../../../components/Title';

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

export default () => (
    <div>
        <Title>Pager with label</Title>
        <div className='display-flex gap-15 max-width-800 margin-bottom-50'>
            <Pager label='Previous' title='The previous chapter' alignRight />
            <Pager label='Next' title='The next chapter' />
        </div>

        <Title>Compact Pager without label</Title>
        <div className='display-flex gap-15 max-width-800 justify-content-between'>
            <Pager title='Previous' variant={Pager.VARIANT_COMPACT} disabled alignRight />
            <Pager title='Next' label='foo' variant={Pager.VARIANT_COMPACT} />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Pager with label</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-15 max-width-800 margin-bottom-50">
        <div class="Pager bg-white border display-flex justify-space-between align-items-center flex-row-reverse cursor-pointer user-select-none rounded padding-y-15 padding-x-20 width-100pct">
            <div class="display-flex flex-1-1 flex-column align-items-end">
                <div class="text-color-gray line-height-16">Previous</div>
                <div class="text-color-darker text-right text-size-16 text-medium">The previous chapter</div>
            </div>
            <div class="text-size-12 display-grid place-items-center">
                <span class="rioglyph text-color-darker rioglyph-arrow-left margin-right-10 text-size-200pct">
                </span>
            </div>
        </div>
        <div class="Pager bg-white border display-flex justify-space-between align-items-center cursor-pointer user-select-none rounded padding-y-15 padding-x-20 width-100pct">
            <div class="display-flex flex-1-1 flex-column ">
                <div class="text-color-gray line-height-16">Next</div>
                <div class="text-color-darker text-size-16 text-medium">The next chapter</div>
            </div>
            <div class="text-size-12 display-grid place-items-center">
                <span class="rioglyph text-color-darker rioglyph-arrow-right margin-left-10 text-size-200pct">
                </span>
            </div>
        </div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Compact Pager without label</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-15 max-width-800 justify-content-between">
        <div class="Pager bg-white border display-flex justify-space-between align-items-center flex-row-reverse pointer-events-none cursor-pointer user-select-none rounded-circle padding-y-5 padding-x-15 width-auto">
            <div class="display-flex flex-1-1 flex-column align-items-end">
                <div class="text-color-light">Previous</div>
            </div>
            <span class="rioglyph text-color-light rioglyph-chevron-left margin-right-5 text-size-10">
            </span>
        </div>
        <div class="Pager bg-white border display-flex justify-space-between align-items-center cursor-pointer user-select-none rounded-circle padding-y-5 padding-x-15 width-auto">
            <div class="display-flex flex-1-1 flex-column ">
                <div class="text-color-darker">Next</div>
            </div>
            <span class="rioglyph text-color-darker rioglyph-chevron-right margin-left-5 text-size-10">
            </span>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| React.ReactNode | — | The title or name of the section next/previous section. |
| label | string \| React.ReactNode | — | The optional label for the full variant. |
| alignRight | boolean | false | Set right alignment for "previous" pager content to be aligned to the right side of the pager and the arrow on the left side. |
| variant | ObjectValues<typeof PagerVariant> | `full` | Define how large the component should be rendered. Possible values are: Pager.VARIANT_FULL, Pager.VARIANT_COMPACT or full, compact. |
| disabled | boolean | false | Sets the pager disabled. |
| onClick | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback function for when the component is clicked. |
| className | string | — | Additional classes for the wrapper element. |