Pagination - Keep React

The Pagination component provides a user-friendly way to navigate through large sets of content by breaking it down into manageable pages. It enhances user experience by allowing easy access to various sections of data or results, such as articles, search results, or product listings, through page numbers or next/previous controls.

Table of Contents#

Default Pagination#

There are two variants of next/previous buttons. You can change the variant with prevNextShape props, and available variants are: "roundSquare" and "circle". Use the iconWithOutText prop to show only the icon in the button.

Pagination With Border#

Add borders to the pagination elements for a clear visual separation. To enable borders in the pagination elements, use the paginateWithBorder={true} prop.

Pagination With Rounded Page#

This style uses rounded page numbers, providing a soft and friendly appearance. To achieve this circle active button, set the activeCurrentPageShape="circle" prop.

Pagination With Input Page#

Allow users to input the page number they want to navigate to, enhancing the user experience. To enable this feature, use the showGoToPaginate={true} prop.

API Reference#

Explore the available props for the Pagination component:

currentPageCurrent page number.number1
prevNextShapeShape of the previous and next buttons.
goToShapeShape of the go-to page input field.
activeCurrentPageShapeShape of the active/current page number.
onPageChangeFunction to be called when a page is changed.functionfunction
iconWithTextWhether to display icons with text.booleanfalse
iconWithOutTextWhether to display icons without text.booleanfalse
paginateWithBorderWhether to add borders to pagination elements.booleanfalse
showGoToPaginateWhether to show the go-to page input field.booleanfalse
totalPagesTotal number of pages.number30
nextBtnStyleCustom class to style the next button.stringNone
previousBtnStyleCustom class to style the previous button.stringNone
pageStyleCustom class to style the page button.stringNone