Pagination

Designer doc

Pagination component helps to navigate through multiple pages of content.

Example

Basic Usage

current and onChange props can be used to achieve controlled pagination

View code

Customizing Items

View code

Custom Input

numSelected prop can be used to display the number of selected rows, if table requires such functionality.

View code

Number of Items to Display

You can change the number of items being displayed by providing navSpan prop. Note that you should pass an odd number greater than 3.

View code

Alignment is defaulted to Center, but its legacy alignment can be set to Right, to position the main Pagination page number button group accordingly.

Right Aligned

View code

Variants can be applied to individual PaginationList basis. In other words, you can also have multiple PaginationList styles within the same Pagination if you need.

Variant Text

View code

Variant Minimal

View code

Virtualization

Page Select

Page options in PaginationPageSelect are not virtualized which can lead to slow rendering when there is a large number of pages. In such cases, consider using PaginationPageVirtualSelect instead, which virtualizes the page options.

View code

Customization

View code

Accessibility

You can navigate the page using:

Arrow Right: go to next page
Arrow Left: go to previous page
Shift + Arrow Left: go to first page
Shift + Arrow Right: go to last page

If you are using a Screen Reader, focusing on a non-selected item will spell out “Page {number}, showing row {start} to {end}”. While focusing on selected one spells out “Go to page {number}, showing row {start} to {end}”.

Focusing on a jumper will spell out “Jump to page {page}”.

References

a11ymatters: https://www.a11ymatters.com/pattern/pagination/
Material UI: https://material-ui.com/components/pagination/
Ant Design: https://ant.design/components/pagination/

API

Prop name	Type	Default	Description
alignment	PaginationAlignments	center	Controls how the pagination items (like pages or page text) are aligned in the main container. Center (default): Page items appear in the middle. Right: Page items float to the right, left area can hold other items.
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
children	ReactNode		React children that can be used to override or extend the default pagination items. For example, you can pass <PaginationList /> or <PaginationPageText /> here.
current	number		The controlled current page number (1-based). If used, initialCurrent is ignored and the component becomes controlled.
initialCurrent	number	1	The initial (uncontrolled) current page number. Defaults to 1.
initialNavSpan	number	7
initialPageSize	number	20
leftContainerProps	DivProps
leftElement	ReactNode		Defaults to showing total pages and selected items for non-minimal variants.
navSpan	number		The controlled number of pagination elements to show (e.g., 7 shows a maximum of 7 page buttons). Must be an odd number greater than 3 for best display.
numSelected	number		(Optional) Number of selected items (out of totalRow). Used by default to display information like "x selected".
onChange	(page: number) => void		A callback that fires when the current page changes (e.g., user navigates to a new page). Receives the new page number as its argument.
onNavSpanChange	(navSpan: number) => void
onPageSizeChange	(pageSize: number) => void
pageSize	number		The controlled page size (number of items per page). If used, initialPageSize is ignored and the component becomes controlled.
rightContainerProps	DivProps
rightElement	ReactNode		Defaults to showing page navigation for non-minimal variants.
sizes	number[]	[10, 20, 30, 40]	Selectable page sizes.
totalRow	number		The total number of rows (items) across all pages. This is used to calculate the number of pages.
variant	PaginationVariants	outlined	The variant of pagination style to use. Outlined (default): Shows outline styling for buttons. Minimal: Shows a simpler pagination, often with only page text or partial controls.

PaginationArrow

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
disabled	boolean	Equivalent to button's disabled property.
keyboardClickKeys	string[]
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>	Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
type	ArrowTypes

PaginationItem

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
disabled	boolean	Equivalent to button's disabled property.
keyboardClickKeys	string[]
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>	Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
page	number

PaginationJumper

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
disabled	boolean	Equivalent to button's disabled property.
keyboardClickKeys	string[]
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>	Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
type	JumperTypes

PaginationList

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
itemSize	number
renderArrow	(type: ArrowTypes) => ReactElement<any, string \| JSXElementConstructor<any>>	(type: ArrowTypes) => <PaginationArrow type={type} />
renderItem	(page: number) => ReactElement<any, string \| JSXElementConstructor<any>>	(item: number) => <PaginationItem page={item} />
renderJumper	(type: JumperTypes) => ReactElement<any, string \| JSXElementConstructor<any>>	(type: JumperTypes) => <PaginationJumper type={type} />
variant	"text" \| "outlined"

PaginationPageSelect

Prop name	Type	Default	Description
id	string
initialIsOpen	boolean
initialKeyboardHighlightedIndex	number
initialMouseHighlightedIndex	number
initialSearchValue	string
initialSelectedIndex	number
initialValue	SelectValue
inputProps	SelectSearchProps
isOpen	boolean
keyboardHighlightedIndex	number
listOptionProps	SelectOptionProps
listProps	SelectListProps
mouseHighlightedIndex	number
onChange	ChangeCallback		Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.
onIsOpenChange	(isOpen: boolean) => void
onKeyboardHighlightedIndexChange	(index: number) => void
onMouseHighlightedIndexChange	(index: number) => void
onSearch	SearchCallback
onSelect	ChangeCallback		Different from onChange: onSelect is triggered even if the option's value is the selected one.
onSelectedIndexChange	(index: number) => void
prefix	ReactNode	Go to
searchValue	string		This is not the selected value. Rather, it's a search value on input if you use SelectSearch.
selectedIndex	number
stateReducer	AcdcStateReducer
value	SelectValue

PaginationPageText

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
itemSize	number
renderArrow	(type: ArrowTypes) => ReactElement<any, string \| JSXElementConstructor<any>>	(type: ArrowTypes) => <PaginationArrow type={type} />
renderPageText	(type: string) => ReactElement<any, string \| JSXElementConstructor<any>>	(current: string) => <PageText>{current}</PageText>
variant	"minimal"

PaginationPageVirtualSelect

Prop name	Type	Default	Description
id	string
initialIsOpen	boolean
initialKeyboardHighlightedIndex	number
initialMouseHighlightedIndex	number
initialSearchValue	string
initialSelectedIndex	number
initialValue	SelectValue
inputProps	SelectSearchProps
isOpen	boolean
keyboardHighlightedIndex	number
listOptionProps	SelectOptionProps
listProps	SelectVirtualizedListProps
mouseHighlightedIndex	number
onChange	ChangeCallback		Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.
onIsOpenChange	(isOpen: boolean) => void
onKeyboardHighlightedIndexChange	(index: number) => void
onMouseHighlightedIndexChange	(index: number) => void
onSearch	SearchCallback
onSelect	ChangeCallback		Different from onChange: onSelect is triggered even if the option's value is the selected one.
onSelectedIndexChange	(index: number) => void
prefix	ReactNode	Go to
searchValue	string		This is not the selected value. Rather, it's a search value on input if you use SelectSearch.
selectedIndex	number
stateReducer	AcdcStateReducer
value	SelectValue

PaginationSelected

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
numSelected	number
prefix	ReactNode	Selected:

PaginationSizeSelect

Prop name	Type	Default	Description
buttonProps	SelectButtonProps
id	string
initialIsOpen	boolean
initialKeyboardHighlightedIndex	number
initialMouseHighlightedIndex	number
initialSearchValue	string
initialSelectedIndex	number
initialValue	SelectValue
isOpen	boolean
keyboardHighlightedIndex	number
listProps	SelectListProps
mouseHighlightedIndex	number
onChange	ChangeCallback		Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.
onIsOpenChange	(isOpen: boolean) => void
onKeyboardHighlightedIndexChange	(index: number) => void
onMouseHighlightedIndexChange	(index: number) => void
onSearch	SearchCallback
onSelect	ChangeCallback		Different from onChange: onSelect is triggered even if the option's value is the selected one.
onSelectedIndexChange	(index: number) => void
searchValue	string		This is not the selected value. Rather, it's a search value on input if you use SelectSearch.
selectedIndex	number
sizes	number[]
stateReducer	AcdcStateReducer
suffix	ReactNode	/ page
value	SelectValue
wrapperProps	HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; }

PaginationTotal

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
prefix	ReactNode	Total:

parts

Prop name	Type	Description
as	void \| WebTarget	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
forwardedAs	void \| WebTarget
theme	DefaultTheme

Example

Basic Usage

Customizing Items

Custom Input

Number of Items to Display

Pagination Alignment

Pagination Variants

Virtualization

Customization

Accessibility

References

API

Pagination

PaginationArrow

PaginationItem

PaginationJumper

PaginationList

PaginationPageSelect

PaginationPageText

PaginationPageVirtualSelect

PaginationSelected

PaginationSizeSelect

PaginationTotal

parts

Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.

Designer

Get started Foundation Components

Developer

Get started Foundation Components

Blogs

All blogs

About us

Coral Team Contact and newsletter

Resources

Figma UI kit Icon library Coral branding

Pagination

Pagination component helps to navigate through multiple pages of content.

Example

Basic Usage

current and onChange props can be used to achieve controlled pagination

Customizing Items

Custom Input

numSelected prop can be used to display the number of selected rows, if table requires such functionality.

Number of Items to Display

You can change the number of items being displayed by providing navSpan prop. Note that you should pass an odd number greater than 3.

Pagination Alignment

Alignment is defaulted to Center, but its legacy alignment can be set to Right, to position the main Pagination page number button group accordingly.

Right Aligned

Pagination Variants

Variants can be applied to individual PaginationList basis. In other words, you can also have multiple PaginationList styles within the same Pagination if you need.

Variant Text

Variant Minimal

Virtualization

Page Select

Page options in PaginationPageSelect are not virtualized which can lead to slow rendering when there is a large number of pages. In such cases, consider using PaginationPageVirtualSelect instead, which virtualizes the page options.

Customization

Accessibility

You can navigate the page using:

If you are using a Screen Reader, focusing on a non-selected item will spell out “Page {number}, showing row {start} to {end}”. While focusing on selected one spells out “Go to page {number}, showing row {start} to {end}”.

Focusing on a jumper will spell out “Jump to page {page}”.

References

API

Pagination

Controls how the pagination items (like pages or page text) are aligned in the main container.

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

React children that can be used to override or extend the default pagination items. For example, you can pass <PaginationList /> or <PaginationPageText /> here.

The controlled current page number (1-based). If used, initialCurrent is ignored and the component becomes controlled.

The initial (uncontrolled) current page number. Defaults to 1.

Defaults to showing total pages and selected items for non-minimal variants.

The controlled number of pagination elements to show (e.g., 7 shows a maximum of 7 page buttons). Must be an odd number greater than 3 for best display.

(Optional) Number of selected items (out of totalRow). Used by default to display information like "x selected".

A callback that fires when the current page changes (e.g., user navigates to a new page). Receives the new page number as its argument.

The controlled page size (number of items per page). If used, initialPageSize is ignored and the component becomes controlled.

Defaults to showing page navigation for non-minimal variants.

Selectable page sizes.

The total number of rows (items) across all pages. This is used to calculate the number of pages.

The variant of pagination style to use.

PaginationArrow

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

PaginationItem

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

PaginationJumper

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

PaginationList

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

PaginationPageSelect

Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.

Different from onChange: onSelect is triggered even if the option's value is the selected one.

This is not the selected value. Rather, it's a search value on input if you use SelectSearch.

PaginationPageText

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

PaginationPageVirtualSelect

Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.

Different from onChange: onSelect is triggered even if the option's value is the selected one.

This is not the selected value. Rather, it's a search value on input if you use SelectSearch.

PaginationSelected

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

PaginationSizeSelect

Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.

Different from onChange: onSelect is triggered even if the option's value is the selected one.

This is not the selected value. Rather, it's a search value on input if you use SelectSearch.

PaginationTotal

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

parts

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.