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 * as React from 'react'

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

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

  return (
    <Pagination
      aria-label="Example Pagination"
      dataTestId="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.