Navigation

Pagination

Controls for moving between numbered pages of content.

PaginationView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Cell } from "retend";

import { Pagination } from "innate-ui";
import { Icon } from "@/docs/icons/Icon";

export function PaginationDemo() {
  const page = Cell.source(1);

  return (
    <Pagination value={page} onChange={(value) => page.set(value)} totalPages={8}>
      <Pagination.FirstIcon>
        <Icon name="firstPage" data-slot-icon="pagination-first" />
      </Pagination.FirstIcon>
      <Pagination.PreviousIcon>
        <Icon name="chevronLeft" data-slot-icon="pagination-previous" />
      </Pagination.PreviousIcon>
      <Pagination.NextIcon>
        <Icon name="chevronRight" data-slot-icon="pagination-next" />
      </Pagination.NextIcon>
      <Pagination.LastIcon>
        <Icon name="lastPage" data-slot-icon="pagination-last" />
      </Pagination.LastIcon>
    </Pagination>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

PaginationProps

Prop	Type	Default
`value`required Current one-based page number.	`JSX.ValueOrCell<number>`	`—`
`totalPages`required Total number of available pages.	`JSX.ValueOrCell<number>`	`—`
`children` Optional content rendered between the previous and next controls.	`JSX.Children`	`—`
`firstLabel` Accessible label for the first-page control.	`JSX.ValueOrCell<string>`	`—`
`previousLabel` Accessible label for the previous-page control.	`JSX.ValueOrCell<string>`	`—`
`pageLabel` Accessible label describing the current page.	`JSX.ValueOrCell<string>`	`—`
`nextLabel` Accessible label for the next-page control.	`JSX.ValueOrCell<string>`	`—`
`lastLabel` Accessible label for the last-page control.	`JSX.ValueOrCell<string>`	`—`
`onChange` Called when navigation requests a different page.	`(page: number) => void`	`—`

Inspect the typed source →