Balance Logo
Reckon Design System


Pagination is used for splitting up content or data into several pages.
pnpm add @reckon-web/pagination
Import usage
import {
} from '@reckon-web/pagination';
  • Code
  • API

Use pagination to let users move through an ordered collection of items that has been split into pages. Pagination should:

  • Only be used for lists with more than 25 items
  • Be placed at the bottom of a long list that has been split up into pages
  • Navigate to the previous and next set of items in the paged list
  • Hint when users are at the first or the last page by disabling the corresponding button


The Pagination component controls user input for both the current page and the page size. It also renders contextual information, like the current range of items.

1–10 of 103 items
of 11 pages
Open in Playroom


You may change the text labels shown to the user to provide contextual information.

11–20 of 103 employees
of 11
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.