Pagination

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Pagination

Use the following props with Pagination component: count prop for number of page items and color prop for different colored pagination.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationBasic = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} />
      <Pagination count={10} color='primary' />
      <Pagination count={10} color='secondary' />
    </div>
  )
}

export default PaginationBasic

Outlined Pagination

Use variant='outlined' prop for outlined pagination.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationOutlined = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} variant='outlined' />
      <Pagination count={10} variant='outlined' color='primary' />
      <Pagination count={10} variant='outlined' color='secondary' />
    </div>
  )
}

export default PaginationOutlined

Tonal Pagination

Use variant='Tonal' prop for Tonal pagination.

---

// React Imports
import React from 'react'

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationTonal = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} variant='tonal' />
      <Pagination count={10} variant='tonal' color='primary' />
      <Pagination count={10} variant='tonal' color='secondary' />
    </div>
  )
}

export default PaginationTonal

Disabled Pagination

Use disabled prop with Pagination component to disable the whole pagination.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationDisabled = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} disabled />
      <Pagination count={10} variant='outlined' disabled />
      <Pagination count={10} variant='tonal' disabled />
    </div>
  )
}

export default PaginationDisabled

Rounded Pagination

Use shape='rounded' prop for rounded pagination.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationRounded = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} shape='rounded' color='primary' />
      <Pagination count={10} variant='outlined' shape='rounded' color='primary' />
      <Pagination count={10} variant='tonal' shape='rounded' color='primary' />
    </div>
  )
}

export default PaginationRounded

Sizes

Use size={'small' | 'large'} prop for different sizes of pagination.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationSizes = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} size='small' variant='tonal' color='primary' />
      <Pagination count={10} color='primary' variant='tonal' />
      <Pagination count={10} size='large' color='primary' variant='tonal' />
    </div>
  )
}

export default PaginationSizes

Buttons

Use showFirstButton & showLastButton props to show first-page and last-page buttons and hidePrevButton & hideNextButton props to hide previous-page and next-page buttons.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationButtons = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={10} showFirstButton showLastButton variant='tonal' color='primary' />
      <Pagination count={10} hidePrevButton hideNextButton variant='tonal' color='primary' />
    </div>
  )
}

export default PaginationButtons

Controlled Pagination

Manage page and onChange props with the help of a state.

Page: 1

---

TSX

// React Imports
import { useState } from 'react'
import type { ChangeEvent } from 'react'

// MUI Imports
import Typography from '@mui/material/Typography'
import Pagination from '@mui/material/Pagination'

const PaginationControlled = () => {
  // State
  const [page, setPage] = useState<number>(1)

  const handleChange = (event: ChangeEvent<unknown>, value: number) => {
    setPage(value)
  }

  return (
    <>
      <Typography className='mbe-2' color='text.primary'>
        Page: {page}
      </Typography>
      <Pagination count={10} page={page} onChange={handleChange} variant='tonal' color='primary' />
    </>
  )
}

export default PaginationControlled

JS

// React Imports
import { useState } from 'react'

// MUI Imports
import Typography from '@mui/material/Typography'
import Pagination from '@mui/material/Pagination'

const PaginationControlled = () => {
  // State
  const [page, setPage] = useState(1)

  const handleChange = (event, value) => {
    setPage(value)
  }

  return (
    <>
      <Typography className='mbe-2' color='text.primary'>
        Page: {page}
      </Typography>
      <Pagination count={10} page={page} onChange={handleChange} variant='tonal' color='primary' />
    </>
  )
}

export default PaginationControlled

Pagination Ranges

You can specify how many digits to display either side of current page with the siblingRange prop, and adjacent to the start and end page number with the boundaryRange prop.

---

// MUI Imports
import Pagination from '@mui/material/Pagination'

const PaginationRanges = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination count={11} defaultPage={6} siblingCount={0} variant='tonal' color='primary' />
      <Pagination count={11} defaultPage={6} variant='tonal' color='primary' /> {/* Default ranges */}
      <Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} variant='tonal' color='primary' />
      <Pagination count={11} defaultPage={6} boundaryCount={2} variant='tonal' color='primary' />
    </div>
  )
}

export default PaginationRanges