Pagination

Pagination shows numbered pages, with previous and next. Press a page, or the arrows at either end:

Showing page 6 of 20

import { Paragraph, View } from '@hozo/core'
import { Pagination } from '@hozo/ui'
import { useState } from 'react'

export function PaginationDemo() {
  const [page, setPage] = useState(6)
  return (
    <View className="items-start gap-3">
      <Pagination page={page} pageCount={20} onPageChange={setPage} />
      <Paragraph className="text-sm text-hozo-text-body">{`Showing page ${page} of 20`}</Paragraph>
    </View>
  )
}

page and onPageChange control it, or defaultPage leaves it uncontrolled. pageCount is the number of pages.
It is a navigation landmark named “Pagination”, holding a list, so a reader can jump to it. Each page is named “Page 5”, and the current one is aria-current="page".
Previous and next are disabled at the ends, not removed, so the controls do not move under a pointer.
The gaps are ellipses, hidden from a reader. siblingCount is how many pages show beside the current one, and boundaryCount how many at each end.
getPageHref turns every page into a link, which is what a page with its own address should be.