pagination-item

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

Slot name	Class name	Default component	Description
first
last
next
previous

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".
.MuiPaginationItem-outlinedSecondary	outlinedSecondary	Styles applied to the root element if variant="outlined" and color="secondary".
.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".
.MuiPaginationItem-textSecondary	textSecondary	Styles 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:

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

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.