NAVIGATION

Pagination

Numbered page navigator with prev / next chevrons, ellipsis collapsing on long ranges, and localizable labels. The page-window math is exposed as computePageWindow if you need to compose your own UI.

Import

import { Pagination } from 'damo-ui'

Basic usage

1function Example() {
2  const [page, setPage] = useState(1)
3  return (
4    <Pagination
5      currentPage={page}
6      totalPages={10}
7      onPageChange={setPage}
8    />
9  )
10}

Long range — ellipsis collapsing

With many pages, Pagination shows the first / last / current window and inserts ellipsis between gaps.

<Pagination currentPage={7} totalPages={42} … />

Localised labels

1<Pagination
2  currentPage={page}
3  totalPages={5}
4  onPageChange={setPage}
5  labels={{
6    previous: 'Previous',
7    next: 'Next',
8    page: 'Page',
9    pageOf: (p, t) => `Page ${p} of ${t}`,
10  }}
11/>

Props

Pagination props
PropTypeDefaultDescription
currentPage*number—Active page (1-indexed). Drives aria-current on the matching button.
totalPages*number—Total number of pages.
maxVisiblenumber—Maximum number of page buttons rendered between the ellipses. Defaults to a sensible window via computePageWindow (also exported).
onPageChange*(page: number) => void—Fires when the user clicks a page number or the prev/next chevrons.
labelsPartial<PaginationLabels>—Override accessible labels — { previous, next, page, pageOf(page, total) }. Defaults are English.
disabledboolean—Disables every button (useful while a parent fetch is in flight).

Accessibility

  • Wrapper is <nav aria-label="Pagination">.
  • The current page button gets aria-current="page"; all other page buttons get an aria-label like Pagina 3 (localised via labels.page).
  • Ellipses render aria-hidden — they are not announced.
  • Keyboard: page numbers and the prev/next chevrons are native <button> elements — Tab moves focus across them, Enter / Space activate them. Disabled buttons (prev at page 1, next at the last page) are skipped from the focus order automatically.
← BreadcrumbsAttrToggleGroup →