Pagination

A basic Pagination control with previous/next buttons and numbered page links. Set IsActive="true" on the current page's PaginationLink to highlight it with a bordered style and aria-current="page" for screen readers.

Use PaginationEllipsis to indicate skipped pages when the total page count is large. The ellipsis is hidden from screen readers via aria-hidden="true" and includes a sr-only "More pages" label. This keeps the pagination compact while still showing the first, last, and surrounding pages.

Add PaginationFirst and PaginationLast buttons for quick navigation to the beginning or end of the dataset. These icon-only buttons include screen-reader-only labels ("Go to first page" / "Go to last page") and are especially useful for large paginated datasets.

Set ShowText="false" on PaginationPrevious and PaginationNext to display compact icon-only buttons. The text label ("Previous" / "Next") is still rendered with a sr-only class so screen readers still announce it. This variant is ideal for tight layouts and mobile interfaces.

Use the Disabled parameter to prevent interaction with navigation buttons. When set on PaginationPrevious or PaginationNext, the button becomes visually muted with opacity-50 and non-interactive via pointer-events-none. This is useful when the user is on the first or last page.

Use the Class parameter to create custom pagination styles with gradients, rounded shapes, or themed colors. The inner PaginationLink and navigation buttons accept Class for full visual customization beyond the default theme.

A real-world composition pattern combining pagination with page info, page size selector, and first/last buttons. This layout mirrors common data table footer patterns with "Showing X-Y of Z" info on the left and compact navigation on the right, ideal for data-intensive applications.