Pagination

A navigation component that splits content across pages with smart ellipsis placement and controlled or uncontrolled state.

import { Pagination } from '@kaynora/ui'

export default function () {
  return (
    <Pagination count={10} />
  )
}

The siblingCount prop controls how many page buttons appear on either side of the active page before ellipsis appears.

import { Pagination } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '40px',
    }}>
      <Pagination count={10} siblingCount={1} />
      <Pagination count={20} siblingCount={2} />
    </div>
  )
}

The value and onChange props enable controlled state management for the current page.

import { Pagination, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [page, setPage] = useState(1)

  return (
    <>
      <Pagination count={10} value={page} onChange={setPage} />
      <T>Current page: {page}</T>
    </>
  )
}

<Pagination />

number

number

number

number

(value: number) => void

{
  root: HTMLDivElementProps
  typography: TypographyProps
  previous: HTMLDivElementProps
  next: HTMLDivElementProps
}