Pagination - Keep React

The Pagination component enhances user experience by providing a user-friendly way to navigate through large sets of content. Whether its articles, search results, or product listings, Pagination breaks down the data into manageable pages, allowing users to easily access different sections.

Default Pagination#

The Default Pagination component displays a basic pagination list, allowing users to navigate between pages.

Pagination Shape#

You can customize the shape of pagination items using the shape prop. Available shapes include 'rounded' and 'circle'. By default, pagination items have a 'rounded' shape.

Navigator With Icon#

Enhance the navigational controls with icons to make them more visually appealing and intuitive.

Navigator With Text#

Alternatively, you can use text-based navigational controls for a simpler approach.

Pagination With Input#

Allow users to switch to a specific page by entering the page number in an input field.

Pagination API#

Here are the available props for the <Pagination> component:

Property	Description	Type	Default
children	Pagination content	ReactNode	JSX
className	ClassName for style elements	string	none
shape	Shape of the pagination element	rounded circle	rounded

Property

Description

Type

Default

children

Pagination content

ReactNode

JSX

className

ClassName for style elements

string

none

shape

Shape of the pagination element

rounded

circle

rounded

Pagination Item API#

Explore the props available for the <Pagination.Item> component:

Property	Description	Type	Default
children	Pagination Item content	ReactNode	Page
className	ClassName for style elements	string	none
active	Page is active or not	boolean	false

Navigator API#

Discover the available props for the <Pagination.Navigator> component:

Property	Description	Type	Default
children	Navigator content	ReactNode	Icon
className	ClassName for style elements	string	none
shape	Shape of the pagination navigator	rounded circle	rounded