Pagination

A pagination component lets users navigate through content split across multiple pages.

<Pagination pages={10}/>

Pages

The pages prop defines how many pages will be available to navigate.

<Pagination pages={3}/>
<Pagination pages={15}/>

Active page

You can set the currently selected page with the activePage prop.
If the prop is omitted, it will fall back to 1.

<Pagination pages={12} activePage={6}/>

Change detection

You can handle navigation changes with the prop onChange. The function will be called whenever one of the controls or any visible page is clicked.

const [page, setPage] = React.useState(1);
 
<div>current page: {page}</div>
<Pagination pages={10} activePage={page} onChange={setPage}/>

Controls

Visibility

The props disableFirstButton, disablepreviousButton, disableNextButton and disableLastButton determine whether a control should be hidden.
By default, all controls are visible.

<Pagination pages={10} disableFirstButton disableLastButton/>
<Pagination pages={10} disableNextButton disablePrevButton/>
<Pagination pages={10} disableFirstButton disableLastButton disableNextButton disablePrevButton/>

Custom icons

You can use different icons for the controls, by using the firstButton, previousButton, nextButton or lastButton prop.

// const first = <svg>...</svg>
// const last = <svg>...</svg>
 
<Pagination pages={10} firstButton={first} lastButton={last} disableNextButton disablePrevButton/>

Boundary

The boundary prop sets the amount of visible entries at the bounds of the pagination.

<Pagination pages={15} activePage={7} boundary={3}/>

Siblings

Customize the amount of visible pages around the currently selected page with the siblings prop.

<Pagination pages={15} activePage={7} siblings={3}/>

Accessibility

Every control and page has the ARIA attribute aria-label. You can customize it by using the ariaLabels prop.
By default, the aria-label attributes are set to Go to (first/previous/next/last/) page and Go to page x.

const aria: AriaLabels = {
  first: 'First page',
  last: 'Last page',
  next: 'Next page',
  prev: 'Previous page',
  page: 'Page'
};
 
<Pagination pages={10} ariaLabels={aria}/>

Props