PaginationItem API

API reference docs for the React PaginationItem component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Pagination

Import

import PaginationItem from '@mui/material/PaginationItem';
// or
import { PaginationItem } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
color	'primary' \| 'secondary' \| 'standard' \| string	'standard'	The active color. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
component	elementType	-	The component used for the root node. Either a string to use a HTML element or a component.
components	{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }	{}	The components used for each slot inside. This prop is an alias for the `slots` prop. It's recommended to use the `slots` prop instead.
disabled	bool	false	If `true`, the component is disabled.
page	node	-	The current page number.
selected	bool	false	If `true` the pagination item is selected.
shape	'circular' \| 'rounded'	'circular'	The shape of the pagination item.
size	'small' \| 'medium' \| 'large' \| string	'medium'	The size of the component.
slots	{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }	{}	The components used for each slot inside. This prop is an alias for the `components` prop, which will be deprecated in the future.
sx	Array<func \| object \| bool> \| func \| object	-	The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
type	'end-ellipsis' \| 'first' \| 'last' \| 'next' \| 'page' \| 'previous' \| 'start-ellipsis'	'page'	The type of pagination item.
variant	'outlined' \| 'text' \| string	'text'	The variant to use.

The ref is forwarded to the root element.

Theme default props

You can use MuiPaginationItem to change the default props of this component with the theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.Mui-disabled		State class applied to the root element if `disabled={true}`.
.Mui-focusVisible		State class applied to the root element if keyboard focused.
.Mui-selected		State class applied to the root element if `selected={true}`.
.MuiPaginationItem-colorPrimary	colorPrimary	Styles applied to the root element if `color="primary"`.
.MuiPaginationItem-colorSecondary	colorSecondary	Styles applied to the root element if `color="secondary"`.
.MuiPaginationItem-ellipsis	ellipsis	Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`.
.MuiPaginationItem-firstLast	firstLast	Styles applied to the root element if `type="first"` or type="last".
.MuiPaginationItem-icon	icon	Styles applied to the icon to display.
.MuiPaginationItem-outlined	outlined	Styles applied to the root element if `variant="outlined"`.
.MuiPaginationItem-outlinedPrimary	outlinedPrimary	Styles applied to the root element if `variant="outlined"` and `color="primary"`. Deprecated - Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead. How to migrate.
.MuiPaginationItem-outlinedSecondary	outlinedSecondary	Styles applied to the root element if `variant="outlined"` and `color="secondary"`. Deprecated - Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead. How to migrate.
.MuiPaginationItem-page	page	Styles applied to the root element if `type="page"`.
.MuiPaginationItem-previousNext	previousNext	Styles applied to the root element if `type="previous"` or type="next".
.MuiPaginationItem-root	root	Styles applied to the root element.
.MuiPaginationItem-rounded	rounded	Styles applied to the root element if `rounded="true"`.
.MuiPaginationItem-sizeLarge	sizeLarge	Styles applied to the root element if `size="large"`.
.MuiPaginationItem-sizeSmall	sizeSmall	Styles applied to the root element if `size="small"`.
.MuiPaginationItem-text	text	Styles applied to the root element if `variant="text"`.
.MuiPaginationItem-textPrimary	textPrimary	Styles applied to the root element if `variant="text"` and `color="primary"`. Deprecated - Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead. How to migrate.
.MuiPaginationItem-textSecondary	textSecondary	Styles applied to the root element if `variant="text"` and `color="secondary"`. Deprecated - Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead. How to migrate.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.