import * as React from 'react';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';

export default function BasicPagination() {
  return (
    <Stack spacing={2}>
      <Pagination count={10} />
      <Pagination count={10} color="primary" />
      <Pagination count={10} color="secondary" />
      <Pagination count={10} disabled />
    </Stack>
  );
}

import Pagination from '@mui/material/Pagination';

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

import * as React from 'react';
import Pagination from '@mui/material/Pagination';

function ControlledPagination() {
  const [page, setPage] = React.useState(1);
  
  const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
    setPage(value);
  };

  return (
    <Pagination count={10} page={page} onChange={handleChange} />
  );
}

// Show first, last, and 1 page on each side
<Pagination count={11} defaultPage={6} siblingCount={1} />

// Show first, last, and 0 pages on each side (only current)
<Pagination count={11} defaultPage={6} siblingCount={0} />

// Show first, last, and 2 pages on each side
<Pagination count={11} defaultPage={6} siblingCount={2} />

// Hide first and last buttons
<Pagination count={11} hidePrevButton hideNextButton />

// Show first and last page buttons
<Pagination count={11} showFirstButton showLastButton />

// 1 page at each end (default)
<Pagination count={11} defaultPage={6} boundaryCount={1} />

// 2 pages at each end
<Pagination count={11} defaultPage={6} boundaryCount={2} />

// 0 pages at each end
<Pagination count={11} defaultPage={6} boundaryCount={0} />

import PaginationItem from '@mui/material/PaginationItem';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
import PaginationItem from '@mui/material/PaginationItem';

function Content() {
  const [page, setPage] = React.useState(1);
  
  return (
    <Pagination
      page={page}
      count={10}
      renderItem={(item) => (
        <PaginationItem
          component={Link}
          to={`/page/${item.page}`}
          {...item}
        />
      )}
    />
  );
}

import TablePagination from '@mui/material/TablePagination';

<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>