Pagination

ARIA

RTL

Pagination is the process of splitting information over multiple pages instead of showing it all on a single page.

Also the name for the interface component used for navigating between these pages.

Anatomy

<Pagination>
  <Pagination.PrevButton>...</Pagination.PrevButton>
  <Pagination.Pages />
  <Pagination.NextButton>...</Pagination.NextButton>
</Pagination>

Default

With button

With array of page hrefs

Pagination

Name	Type	Required	Default	Description
className	string	No	-	Tailwind classes for custom styles.
currentPage	number	Yes	-	The value of current page
hrefsArray	string[]	No	-	Array of hrefs for each page.
setCurrentPage	(page: number) => void	Yes	-	Callback function once a page is updated.
totalPages	number	Yes	-	The number pages.

Pagination.PrevButton

Name	Type	Required	Default	Description
as	string	No	button	Rendered HTML element.
className	string	No	-	Tailwind classes for custom styles.
Render Props:
disabled	boolean	No	-	Disabled state for the prev button when were reached the first page.

Pagination.NextButton

Name	Type	Required	Default	Description
as	string	No	button	Rendered HTML element.
className	string	No	-	Tailwind classes for custom styles.
Render Props:
disabled	boolean	No	-	Disabled state for the next button when were reached the last page.

Pagination.Pages

Name	Type	Required	Default	Description
as	string	No	a	Rendered HTML element.
className	string	No	-	Tailwind classes for custom styles.
truncableText	JSX.Element \| string	No	...	Text to render if a one or more pages are truncated.