Balance Logo
Reckon Design System
Open playroom


Pagination is used for splitting up content or data into several pages.
pnpm add @balance-web/pagination
Import usage
import {
} from '@balance-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.

Edit in Playroom


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

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo