Pagination

Moves between pages of results: previous/next arrows, the first and last page, the pages around the current one, and an ellipsis for the gaps.

Usage

Import the component and render it.

import { Pagination } from 'src/components/Pagination/Pagination';

<Pagination page={1} pageCount={10} />

Role: navigation (<nav aria-label="Pagination"> with a list of Pagination Items).

Key	Action
`Tab`	Moves through the arrows and pages
`Enter / Space`	Goes to the focused page

Shows the first and last page, three consecutive pages around the current one, and an ellipsis for each gap (as in Figma: 1 2 3 … 10).
A gap of a single page shows that page instead of an ellipsis.

Use the following composition to build a Pagination:

Pagination
└── PaginationItem

One element of a Pagination: a page number, a previous/next arrow, or an ellipsis for skipped pages. Only used inside Pagination.

PaginationItem

<PaginationItem />

Pass callbacks to respond to the component.

import { Pagination } from 'src/components/Pagination/Pagination';

<Pagination page={1} pageCount={10} onPageChange={(page) => console.log(page)} />

Callback	When
`onPageChange`	Called with the new page.