Components
Pagination

Pagination

Pagination serves as a control mechanism for dividing content into manageable chunks across different pages. It enables users to navigate through the information more conveniently, accessing one section at a time without feeling overwhelmed.

Examples

Default

Default Pagination.

Color

Change the color by passing the color prop to the component.

Borderless

Control the border by passing the border prop to the component.

Size

Change the size by passing the size prop to the component.

Rows per page

Control the rows per page by passing the onRowsPerPageChange prop to the component.

Default page size

Control the default rows per page by passing the defaultPageSize prop to the component.

Default page

Control the default page by passing the defaultPage prop to the component.

Number of pages

Control the number of pages by passing the totalPages prop to the component.

Installation

bordered
boolean
default: true

Whether the pagination should have a border.

color
"primary"
"neutral"
default: "primary"

Color of the Pagination.

size
"sm"
"md"
"lg"
default: "md"

Size of the Pagination.

defaultPage
number
default: 1

Default page number.

totalPages
number
default: 5

Total number of pages.

defaultPageSize
10
20
50
100
default: 10

Default page number.

onRowsPerPageChange
(rows: 10 | 20 | 50 | 100) => any

Total number of pages.

className
string

Classname to style the pagination.