Navigation

Pagination

Moves through pages of results.

import { Pagination } from "@flinbu/seed";

With a summary

import { Badge, Pagination } from "@flinbu/seed";

const [page, setPage] = React.useState(3);
const from = (page - 1) * 20 + 1, to = Math.min(page * 20, 446);

<div className="w-full max-w-xl">
  <Pagination page={page} count={23} onPageChange={setPage} summary={<>{from}–{to} of 446 tokens <Badge className="ml-xs">Color</Badge></>} />
</div>

Use it for

Tables and lists with more than one page.

Use something else for

Feeds people scroll: load more instead.

Props

Prop	Type	Default	Description
`page`	`number`	–	1-based current page.
`count`	`number`	–	Number of pages.
`onPageChange`	`(page: number) => void`	–	Called with the new page.
`siblings`	`number`	`1`	Pages shown on each side of the current one.
`summary`	`ReactNode`	–	Text before the buttons.
`size`	`'sm''md'`	`'sm'`	Button size.

Accessibility

A nav landmark; the current page has aria-current=page; Previous and Next are named and disabled at the ends.
On small screens it shows Page 3 of 23 between the arrows.