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
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
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?
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 ;
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.
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 ;
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 .