Pagination

Accessible React pagination with previous and next, page links, an underline-bar current page, ellipses, and the paginationRange helper for a stable width.

Open in Storybook ↗

Mark the current page with isActive, and use the paginationRange helper to keep the pager a stable width across pages.

When to use

Use Pagination under tables and lists that page on the server, such as request archives. Keep the pager the same width across pages with paginationRange so controls do not move under the cursor.

For infinite feeds, load more on scroll instead. Show the total count nearby.

Examples

Static pager

Sizes

Stateful pager with paginationRange

Props

Props declared by Pagination. Native attributes of the underlying element pass through.

<Pagination>

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`

<PaginationLink>

Prop	Type	Default	Description
`isActive`	`boolean`
`asChild`	`boolean`		Render as the consumer element (e.g., router Link) via Radix Slot.

<PaginationNav>

Prop	Type	Default	Description
`asChild`	`boolean`		Render as the consumer element (e.g., router Link) via Radix Slot.
`label`	`string`		Accessible label for the icon-only button - also drives `aria-label` (the arrow has no visible text). Pass a translated string for non-English UIs. Ignored when `asChild` + consumer-provided `children` are used.

<PaginationOverflow>

Prop	Type	Description
`pages`required	`number[]`	The collapsed page numbers to list in the jump-to-page menu.
`current`	`number`	Current page - marked with `aria-current` + a trailing check.
`onSelect`required	`(page: number) => void`	Called with the chosen page number.
`label`	`string`	Accessible label for the trigger. Defaults to `"More pages"`.

Accessibility

Pagination renders a <nav> with an aria-label and a list of links. The active page carries aria-current="page", and disabled previous and next controls expose aria-disabled.

Previous and next have accessible names, and their icons flip in RTL so they point the right way.