Pagination

RzPagination is a composable pagination navigation pattern for long lists and result sets. The component family follows a modular structure— RzPagination, PaginationList, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis—so you can build simple or advanced page navigation controls while maintaining semantic HTML and accessibility.

Default Pagination

Use this default composition to render previous/next controls, numbered page links, and an ellipsis for omitted pages. Mark the current page with IsActive.

Source

<RzPagination>
    <PaginationList>
        <PaginationItem>
            <PaginationPrevious Href="#" />
        </PaginationItem>
        <PaginationItem>
            <PaginationLink Href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
            <PaginationLink Href="#" IsActive="true">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
            <PaginationLink Href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
            <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
            <PaginationNext Href="#" />
        </PaginationItem>
    </PaginationList>
</RzPagination>

Compact Pagination

For smaller layouts, render only previous/next and the active page. This pattern keeps navigation clear while minimizing horizontal space usage.

Source

<RzPagination AriaLabel="Compact pagination navigation">
    <PaginationList>
        <PaginationItem>
            <PaginationPrevious Href="#" />
        </PaginationItem>
        <PaginationItem>
            <PaginationLink Href="#" IsActive="true">12</PaginationLink>
        </PaginationItem>
        <PaginationItem>
            <PaginationNext Href="#" />
        </PaginationItem>
    </PaginationList>
</RzPagination>

API Reference

The following tables summarize the component parameters for the pagination family.

RzPagination

Property	Description	Type	Default
`AriaLabel`	`string?` – Accessible label for the pagination landmark navigation.	`string?`	`Localized: RzPagination.AriaLabel`
`ChildContent`	`RenderFragment?` – Pagination content, usually a `PaginationList`.	`RenderFragment?`	`null`

PaginationList and PaginationItem

PaginationList and PaginationItem are structural wrappers. They primarily accept ChildContent and pass through additional HTML attributes.

PaginationLink

Property	Description	Type	Default
`Href`	`string?` – URL for the page link.	`string?`	`null`
`IsActive`	`bool` – Marks the link as the current page style variant.	`bool`	`false`
`AriaLabel`	`string?` – Optional accessible label for the page link.	`string?`	`null`
`ChildContent`	`RenderFragment?` – Visible content of the link, typically a page number.	`RenderFragment?`	`null`

PaginationPrevious and PaginationNext

Property	Description	Type	Default
`Href`	`string?` – URL for the previous/next navigation link.	`string?`	`null`
`Label`	`string?` – Visible label text.	`string?`	`Localized (Previous/Next)`
`AriaLabel`	`string?` – Accessible label for the control.	`string?`	`Localized (Previous/Next)`

PaginationEllipsis

Property	Description	Type	Default
`ScreenReaderText`	`string?` – Text announced by screen readers for omitted pages.	`string?`	`Localized: PaginationEllipsis.MorePages`