Pagination

Page navigation: numbered pages or a compact previous/next control.

Import

import { Pagination } from '@marbleui/ui'

Props

<Pagination>

Prop	Type	Default	Description
onChange *required	`(page: number) => void`	`—`
page *required	`number`	`—`
total *required	`number`	`—`
aria-label	`string`	`—`
className	`string`	`—`
variant	`'numbered' \| 'simple'`	`'numbered'`	"numbered": page buttons. "simple": previous / Page x of y / next.

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Page controls for paged data. For infinite or “load more” lists no pagination is needed; for tabular data pair it with Table or DataGrid.

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

Controlled only: you pass page (1-based), total (page count) and onChange.
numbered (default) shows first, last, current and neighbouring pages with ellipses; simple shows Previous / “Page x of y” / Next.
Buttons are labelled “Previous page”, “Next page” and “Page N”, the current one has aria-current="page", and the nav’s aria-label defaults to “Pagination”.
Previous and Next disable at the ends. getPageRange is exported for custom layouts.

Example source · show

import { useState } from 'react'
import { Pagination } from './pagination'

function Numbered() {
  const [page, setPage] = useState(6)
  return <Pagination page={page} total={20} onChange={setPage} />
}

function Simple() {
  const [page, setPage] = useState(1)
  return <Pagination variant="simple" page={page} total={8} onChange={setPage} />
}

export const styles = { Numbered, Simple }

Source: packages/ui/src/pagination/pagination.tsx

Catalog

Category: navigation
Priority: Foundation
Primitive: composed