nili/ui
enfaartr
All components

Pagination

Overview
19 exports4 variant axes34 props4 files
import { Pagination, PaginationAlign, PaginationEllipsis, PaginationLabels, PaginationSlot, PaginationType } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Basic

count is the number of pages; page is 1-based. Uncontrolled with defaultPage, or controlled with page plus onPageChange.

import { Pagination } from "@nili/ui"

export function Example() {
  const [page, setPage] = useState(3)

  return (
    <Pagination
      count={16}
      page={page}
      onPageChange={setPage}
      labels={{ root: "Pagination" }}
    />
  )
}

Types

Basic is separate cells; Full Radius makes them pills; Group joins them into a single segmented control.

basic
full-radius
group
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={16} defaultPage={3} type="basic" />
      <Pagination count={16} defaultPage={3} type="full-radius" />
      <Pagination count={16} defaultPage={3} type="group" />
    </>
  )
}

The window

siblingCount is how many pages sit either side of the current one; boundaryCount is how many stay pinned at each end. showEdges adds first/last jumps outside the arrows.

siblingCount=1 (default)
siblingCount=2 · boundaryCount=2
showEdges
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={40} defaultPage={20} siblingCount={1} />
      <Pagination count={40} defaultPage={20} siblingCount={2} boundaryCount={2} />
      <Pagination count={40} defaultPage={20} showEdges />
    </>
  )
}

Alignment and device mode

align positions the row. The mobile device mode drops the cells for a pair of arrows and a “Page 3 of 16” summary — a sixteen-page trail does not fit on a phone.

align=start
align=center
align=end
align=between
mobile
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={16} defaultPage={3} align="start" />
      <Pagination count={16} defaultPage={3} align="between" />
      <Pagination count={16} defaultPage={3} deviceMode="mobile" />
    </>
  )
}

Advanced

advanced adds the summary before the trail and the rows-per-page control after it. Every visible string is a prop — a design system that owns its copy forces its translation stack on every consumer.

import { Pagination } from "@nili/ui"

export function Example() {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  return (
    <Pagination
      advanced
      count={16}
      page={page}
      onPageChange={setPage}
      pageSize={pageSize}
      pageSizeOptions={[10, 20, 50]}
      onPageSizeChange={setPageSize}
      labels={{
        root: "Pagination",
        summary: (page, count) => `Page ${page} of ${count}`,
        perPage: (size) => `${size} / page`,
      }}
    />
  )
}

Disabled

Greys out the whole control — a table that is reloading, for instance.

import { Pagination } from "@nili/ui"

export function Example() {
  return <Pagination count={16} defaultPage={3} disabled />
}