Welcome UI - Pagination

Pagination

The Pagination component is a navigational element that divides content into discrete pages, allowing users to navigate through large sets of data or content efficiently. It provides controls to move between pages, such as next, previous, and specific page numbers. This component is essential for enhancing user experience by making large amounts of information more manageable and accessible.

import { useState } from 'react'

import { Pagination } from 'welcome-ui/Pagination'
import type { PaginationProps } from 'welcome-ui/Pagination/types'

const Example = () => {
  const [page, setPage] = useState<PaginationProps['page']>(8)

  return (
    <Pagination
      aria-label="Example Pagination"
      getHref={page => `?page=${page}`}
      onChange={page => setPage(Number(page))}
      page={page}
      pageCount={10}
    />
  )
}

export default Example

Examples

Range display

When your range display is above your pageCount, all the pages are shown.
Change range with rangeDisplay, by default it is 5.

First and Last buttons

You can optionally display First and Last buttons by setting showEdgeControls to true. These buttons allow users to quickly jump to the first or last page, which is especially useful for large datasets with many pages.

Size

The Pagination component supports two different sizes: md and lg (default). Use the size prop to control the overall size of the pagination controls.

Custom texts

You can customize the text displayed on all navigation buttons using the navigationTexts prop.