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.

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:

Property	Description	Type	Default
currentPage	Current page number.	number	1
prevNextShape	Shape of the previous and next buttons.	circle round roundSquare none	none
goToShape	Shape of the go-to page input field.	circle round roundSquare none	none
activeCurrentPageShape	Shape of the active/current page number.	circle roundSquare	"roundSquare"
layout	Layout style.	navigation pagination table	pagination
onPageChange	Function to be called when a page is changed.	function	function
iconWithText	Whether to display icons with text.	boolean	false
iconWithOutText	Whether to display icons without text.	boolean	false
paginateWithBorder	Whether to add borders to pagination elements.	boolean	false
showGoToPaginate	Whether to show the go-to page input field.	boolean	false
totalPages	Total number of pages.	number	30