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.

Source

Github

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.

Github

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.

Github

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.

Github

Condensed

The Pagination component supports a condensed prop to only display the range of page instead of buttons.

Github

Custom texts

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

Github

Floating action bar Stepper