Developer mode
Opens components on the React tab by default.
Your bookmarks

Pagination / React

Lets users navigate through large collections of items.

To implement Pagination component into your project you’ll need to the import:

import Pagination from "@kiwicom/orbit-components/lib/Pagination";

After adding import into your project you can use it simply like:

<Pagination pageCount={1337} selectedPage={69} />


Table below contains all types of the props available in the Pagination component.

Name Type Default Description
dataTest string Optional prop for testing purposes.
hideLabels boolean true If false, the Previous and Next labels will be hidden.
onPageChange number => void Function for handling onPageChange event. See Functional specs
pageCount number The page count to render into separated buttons. See Functional specs
selectedPage number 1 The index number of the selected page.
size enum "normal" The size of the Pagination.



Functional specs

  • If the pageCount will be bigger than 7, the compact version will be rendered.

  • The prop onPageChange will return the new index of selected page. Use arrow function for it, e.g.:

<Pagination onPageChange={selectedPage => doSomething(selectedPage)} />