Pagination

Composable links or native buttons for moving between pages.

Interactive preview

Live specimenTry the component

Showing sample page 1 of 3.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add pagination

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Pagination aria-label="Project pages">
  <PaginationContent>
    <PaginationItem><PaginationPrevious disabled href="?page=0" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=1" isActive aria-label="Page 1">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="?page=2" /></PaginationItem>
  </PaginationContent>
</Pagination>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Pagination`	`Native nav attributes`	`aria-label=Pagination`
`PaginationContent / PaginationItem`	`Native ul / li attributes`	`—`
`PaginationLink.isActive / disabled`	`boolean`	`false`
`PaginationButton.isActive`	`boolean`	`false`
`PaginationPrevious / PaginationNext`	`PaginationLinkProps`	`Previous / Next`
`PaginationEllipsis`	`Native span attributes`	`More pages`

Accessibility

Active links/buttons expose aria-current=page. Disabled links omit href and leave the Tab sequence; disabled buttons use the native attribute. Use links for real destinations and PaginationButton for in-memory application state. Name numeric pages and the navigation. Ellipsis is non-interactive. The application owns page counts, range truncation, result announcements, and focus after fetching.