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.

dataTeststringOptional prop for testing purposes.
hideLabelsbooleantrueIf false, the Previous and Next labels will be visible.
labelPrevstringThe text label for the previous page call to action.
labelNextstringThe text label for the next page call to action.
labelProgressReact.NodeThe text label for progress indicator.
onPageChangenumber => voidFunction for handling onPageChange event. See Functional specs
pageCountnumberThe page count to render into separated buttons. See Functional specs
selectedPagenumber1The index number of the selected page.
sizeenum"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)} />