Skip to content

PaginationItem API

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

Demos

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.

NameTypeDefaultDescription
classesobject-

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.

componentelementType-

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.

disabledboolfalse

If true, the component is disabled.

pagenode-

The current page number.

selectedboolfalse

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.

slotProps{ first?: func
| object, last?: func
| object, next?: func
| object, previous?: func
| object }		{}

The props used for each slot inside.

slots{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }{}

The components used for each slot inside.

sxArray<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.

Slots

Slot nameClass nameDefault componentDescription
first
last
next
previous

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 nameRule nameDescription
.Mui-disabledState class applied to the root element if disabled={true}.
.Mui-focusVisibleState class applied to the root element if keyboard focused.
.Mui-selectedState class applied to the root element if selected={true}.
.MuiPaginationItem-colorPrimarycolorPrimaryStyles applied to the root element if color="primary".
.MuiPaginationItem-colorSecondarycolorSecondaryStyles applied to the root element if color="secondary".
.MuiPaginationItem-ellipsisellipsisStyles applied to the root element if type="start-ellipsis" or type="end-ellipsis".
.MuiPaginationItem-firstLastfirstLastStyles applied to the root element if type="first" or type="last".
.MuiPaginationItem-iconiconStyles applied to the icon to display.
.MuiPaginationItem-outlinedoutlinedStyles applied to the root element if variant="outlined".
.MuiPaginationItem-outlinedPrimaryoutlinedPrimaryStyles applied to the root element if variant="outlined" and color="primary".
.MuiPaginationItem-outlinedSecondaryoutlinedSecondaryStyles applied to the root element if variant="outlined" and color="secondary".
.MuiPaginationItem-pagepageStyles applied to the root element if type="page".
.MuiPaginationItem-previousNextpreviousNextStyles applied to the root element if type="previous" or type="next".
.MuiPaginationItem-rootrootStyles applied to the root element.
.MuiPaginationItem-roundedroundedStyles applied to the root element if rounded="true".
.MuiPaginationItem-sizeLargesizeLargeStyles applied to the root element if size="large".
.MuiPaginationItem-sizeSmallsizeSmallStyles applied to the root element if size="small".
.MuiPaginationItem-texttextStyles applied to the root element if variant="text".
.MuiPaginationItem-textPrimarytextPrimaryStyles applied to the root element if variant="text" and color="primary".
.MuiPaginationItem-textSecondarytextSecondaryStyles applied to the root element if variant="text" and color="secondary".

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