Material-UI Pagination

The Material-ui pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Learn how to create nice looking pagination using these Material-ui pagination examples to indicate a series of related content exists across multiple pages and to navigate through pages easily.

Example

Copy

import React from "react";

// @material-ui/core components
// @material-ui/lab components
import Pagination from "@material-ui/lab/Pagination";
// @material-ui/icons components

// core components

const Example = () => {
  return (
    <>
      <Pagination count={3} color="primary" variant="outlined" page={-1} />
    </>
  );
};

export default Example;

Disabled and active states

Copy

import React from "react";

// @material-ui/core components
// @material-ui/lab components
import Pagination from "@material-ui/lab/Pagination";
// @material-ui/icons components

// core components

const Example = () => {
  return (
    <>
      <Pagination count={3} color="primary" variant="outlined" page={2} />
    </>
  );
};

export default Example;

Sizing

Fancy larger or smaller pagination?

Copy

import React from "react";

// @material-ui/core components
// @material-ui/lab components
import Pagination from "@material-ui/lab/Pagination";
// @material-ui/icons components

// core components

const Example = () => {
  return (
    <>
      <Pagination
        count={3}
        color="primary"
        variant="outlined"
        page={3}
        size="large"
        hideNextButton={true}
        hidePrevButton={true}
      />
    </>
  );
};

export default Example;

Copy

import React from "react";

// @material-ui/core components
// @material-ui/lab components
import Pagination from "@material-ui/lab/Pagination";
// @material-ui/icons components

// core components

const Example = () => {
  return (
    <>
      <Pagination
        count={3}
        color="primary"
        variant="outlined"
        page={3}
        size="large"
        hideNextButton={true}
        hidePrevButton={true}
      />
      <Pagination
        count={3}
        color="primary"
        variant="outlined"
        page={3}
        size="small"
        hideNextButton={true}
        hidePrevButton={true}
      />
    </>
  );
};

export default Example;

Alignment

Change the alignment of pagination components with flexbox utilities.

Copy

import React from "react";

// @material-ui/core components
import Box from "@material-ui/core/Box";
// @material-ui/lab components
import Pagination from "@material-ui/lab/Pagination";
// @material-ui/icons components

// core components

const Example = () => {
  return (
    <>
      <Box justifyContent="center" display="flex">
        <Pagination count={3} color="primary" variant="outlined" page={2} />
      </Box>
    </>
  );
};

export default Example;

Copy

import React from "react";

// @material-ui/core components
import Box from "@material-ui/core/Box";
// @material-ui/lab components
import Pagination from "@material-ui/lab/Pagination";
// @material-ui/icons components

// core components

const Example = () => {
  return (
    <>
      <Box justifyContent="flex-end" display="flex">
        <Pagination count={3} color="primary" variant="outlined" page={2} />
      </Box>
    </>
  );
};

export default Example;

Props

If you want to see more examples and properties please check the official Material-UI Documentation.