Navigation

Pagination

Navigates between pages with native links and a clear current page.

idle

Usage

import {
	Pagination,
	PaginationContent,
	PaginationEllipsis,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Pagination>
	<PaginationContent>
		<PaginationItem>
			<PaginationPrevious />
		</PaginationItem>
		<PaginationItem>
			<PaginationLink />
		</PaginationItem>
		<PaginationItem>
			<PaginationEllipsis />
		</PaginationItem>
		<PaginationItem>
			<PaginationLink />
		</PaginationItem>
		<PaginationItem>
			<PaginationNext />
		</PaginationItem>
	</PaginationContent>
</Pagination>

Examples

Project documents

Northstar launch / Shared documents

Framework links and RTL

Next.js links preserve client navigation. Arrows follow reading direction, and unavailable pages skip keyboard focus.

Recommendations

Guidance	Practice
Do	Keep page destinations shareable and mark the current page. Disable unavailable previous and next actions.

Usage boundaries

Guidance	Boundary
Scope	The application owns fetching and page state. Use Data Table Pagination for a managed table instance.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Pagination / PaginationContent / PaginationItem`	`nav / ul / li`	`aria-label="Pagination"`	Caller owns the page list and destinations. Native Tab navigation remains intact.
`PaginationLink.active`	`boolean`	`false`	Marks the current page with aria-current="page" and a quiet selected fill.
`PaginationLink.size`	`"default" \| "icon"`	`icon`	Icon-sized page controls by default. Previous and Next use the default size with extra label padding.
`PaginationLink.render`	`ReactElement \| render function`	`undefined`	Supports framework links. Disabled links use a native anchor without a destination.
`disabled`	`boolean`	`false`	Removes href, skips Tab, and blocks activation on unavailable pages.
`PaginationPrevious / PaginationNext`	`Link parts`	`Previous / Next`	Provide translated children and aria-label when needed.
`PaginationEllipsis`	`Display part`	`More pages`	Signals omitted pages. It does not generate ranges or open a menu.