Drawer Content Here
- Sign Out
Simple 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 PaginationSimple = () => {
      return (
        <div className='demo-space-y'>
          <Pagination count={10} />
          <Pagination count={10} color='primary' />
          <Pagination count={10} color='secondary' />
        </div>
      )
    }

    export default PaginationSimple

Outlined Pagination

Use `variant='outlined'` prop for outlined pagination.

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

    const PaginationOutlined = () => {
      return (
        <div className='demo-space-y'>
          <Pagination count={10} variant='outlined' />
          <Pagination count={10} variant='outlined' color='primary' />
          <Pagination count={10} variant='outlined' color='secondary' />
        </div>
      )
    }

    export default PaginationOutlined

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='demo-space-y'>
          <Pagination count={10} disabled />
          <Pagination count={10} variant='outlined' 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='demo-space-y'>
          <Pagination count={10} shape='rounded' color='primary' />
          <Pagination count={10} variant='outlined' shape='rounded' color='secondary' />
        </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='demo-space-y'>
          <Pagination count={10} size='small' />
          <Pagination count={10} color='primary' />
          <Pagination count={10} size='large' color='secondary' />
        </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='demo-space-y'>
          <Pagination count={10} showFirstButton showLastButton />
          <Pagination count={10} hidePrevButton hideNextButton />
        </div>
      )
    }

    export default PaginationButtons

Controlled Pagination

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

Page: 1

    // ** 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 (
        <div>
          <Typography sx={{ mb: 2 }}>Page: {page}</Typography>
          <Pagination count={10} page={page} onChange={handleChange} />
        </div>
      )
    }

    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='demo-space-y'>
          <Pagination count={11} defaultPage={6} siblingCount={0} />
          <Pagination count={11} defaultPage={6} /> {/* Default ranges */}
          <Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
          <Pagination count={11} defaultPage={6} boundaryCount={2} />
        </div>
      )
    }

    export default PaginationRanges