Pagination

Category: Navigation

<Pagination page={page} total={total} onChange={setPage} />

Install: @helix-ui/core

import { Pagination } from '@helix-ui/core';

status: stable · since: 0.1.0

Tags: pages, paging, numbers

Anatomy

[ ‹ ]  1  2  …  7  8 [9] 10 …  20  [ › ]

Layout

display — inline-flex
width — content
height — content
intrinsicSize — centered, hugs page count
stackable — false
fullBleed — false

Visual

A horizontal row of small page-number buttons with previous/next arrows on the ends and ellipses for elided ranges. Current page filled with brand tone.

Props

Name	Type	Default	Description
`page`	`number`	—	Current 1-indexed page. Required.
`total`	`number`	—	Total number of pages. Required.
`onChange`	`(page: number) => void`	—	Page change handler.
`siblings`	`number`	`1`	Pages shown on each side of the current page.
`boundaries`	`number`	`1`	Pages shown at the start and end.
`label`	`string`	`Pagination`	Accessible label on the `<nav>`.

Tokens used

color.bg.action.neutral.default, color.bg.action.brand.default, color.text.primary, color.text.secondary, color.text.muted, color.text.on.brand, color.border.focus, radius.md, space.2, font.family.sans, font.size.sm, font.weight.semibold

Accessibility

Notes

Wrapped in <nav aria-label>, current page marked with aria-current="page".
Previous/Next buttons have explicit aria-label.

Composes with

Component	Relation	Note
`Table`	`sibling`	Common below a Table.
`List`	`sibling`	Or below a List.

Prompt examples

These are the AI prompt → JSX mappings used by the helix-ui prompt DSL and integrations like Cursor / Claude Code.

paginate a table

“pagination for 20 pages, current page 9”

<Pagination total={20} page={page} onChange={setPage} />