Pagination

A basic pagination.

<Pagination count={20} pageSize={2} defaultPage={1}>
  <PaginationPrevTrigger />
  <PaginationItems />
  <PaginationNextTrigger />
</Pagination>

Controlled, using page and onPageChange

() => {
 const [page, setPage] = React.useState(1)
 return (
   <Pagination 
     count={20} 
     pageSize={2}
     page={page}
     onPageChange={(e) => setPage(e.page)}
    >
    <PaginationPrevTrigger />
    <PaginationItems />
    <PaginationNextTrigger />
  </Pagination>
 )
}

As link, using the getHref prop

<Pagination 
  count={20} 
  pageSize={2}
  defaultPage={3}
  getHref={(page) => `?page=${page}`}
>
  <PaginationPrevTrigger />
  <PaginationItems />
  <PaginationNextTrigger />
</Pagination>

When using the Pagination component, follow these guidelines for optimal usage:

1. Provide an Accurate Page Count: Ensure that the count prop accurately reflects the total number of pages. This allows users to navigate efficiently through all available content.
2. Define the Page Size: Use the pageSize prop to specify the number of items displayed per page. This helps maintain consistency in pagination behavior.
3. Set a Default Page: The defaultPage prop determines which page is shown initially. Ensure this value aligns with your application’s expected user flow.
4. Adjust Sibling Pages: The siblingCount prop controls how many page numbers are shown adjacent to the current page. Use this to balance usability and compactness.