Pagination
Provides navigation controls for paging through large datasets or content, with support for automatic state management, page size selection, and first/last page navigation.
Default
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.With Ellipsis
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.With First and Last
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.Icon Only
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.Disabled State
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.Custom Variant
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.Table Pagination
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.