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.

Pagination

Anatomy

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

Default

With button

With array of page hrefs

Pagination

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for custom styles.
currentPagenumberYes-The value of current page
hrefsArraystring[]No-Array of hrefs for each page.
setCurrentPage(page: number) => voidYes-Callback function once a page is updated.
totalPagesnumberYes-The number pages.

Pagination.PrevButton

NameTypeRequiredDefaultDescription
asstringNobuttonRendered HTML element.
classNamestringNo-Tailwind classes for custom styles.
Render Props:
disabledbooleanNo-Disabled state for the prev button when were reached the first page.

Pagination.NextButton

NameTypeRequiredDefaultDescription
asstringNobuttonRendered HTML element.
classNamestringNo-Tailwind classes for custom styles.
Render Props:
disabledbooleanNo-Disabled state for the next button when were reached the last page.

Pagination.Pages

NameTypeRequiredDefaultDescription
asstringNoaRendered HTML element.
classNamestringNo-Tailwind classes for custom styles.
truncableTextJSX.Element | stringNo...Text to render if a one or more pages are truncated.