Pagination

A component for navigating through multiple pages of content.

When To Use

Use the Pagination component when you need to:

Navigate through large sets of data split across multiple pages
Allow users to browse content that is divided into pages
Implement search results pages with multiple results
Create tables or lists with many items
Display a sequence of steps or pages
Build interfaces for catalogs, galleries, or any paginated content

Pagination helps users navigate through content without overwhelming them with too much information at once.

Examples

Basic#

With Text#

Page 1 of 10

Items Per Page#

Showing 1 to 10 of 100 results

Items per page:

Custom#

Props

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`displayName`	`string`	-

Navigation Menu

A responsive navigation component that provides an accessible way to navigate between pages or sections.

Popover

Displays rich content in a portal, triggered by a button.