Pagination

Moves through large result sets with controlled or uncontrolled page state and logical RTL keyboard navigation.

Default

A compact, accessible page navigator with automatic ellipsis windows.

tsx

<Pagination pageCount={12} defaultPage={4} />

tsx

import { Pagination } from "madagent";

Own the current page when it drives a query, URL, or server request.

Selected page: 3

tsx

const [page, setPage] = useState(3);
<Pagination page={page} onChange={setPage} pageCount={20} showEdges />

Use the small size in table footers and show first/last controls for long datasets.

tsx

<Pagination size="sm" pageCount={8} />
<Pagination pageCount={40} defaultPage={20} showEdges />

Prop	Type	Default	Description
`page`	`number`	-	Controlled 1-based page
`defaultPage`	`number`	`1`	Initial uncontrolled page
`onChange`	`(page: number) => void`	-	Called when navigation requests a page
`pageCount*`	`number`	-	Total number of pages
`siblingCount`	`number`	`1`	Pages shown on either side of the current page
`showEdges`	`boolean`	`false`	Shows first and last page controls
`size`	`"sm""md"`	`"md"`	Control size
`ariaLabel`	`string`	`"Pagination"`	Accessible navigation landmark label

Components automatically adapt to right-to-left languages using CSS logical properties.

tsx

<Pagination pageCount={12} defaultPage={4} ariaLabel="ترقيم الصفحات" />