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 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. |
| disabled | bool | false | If |
| page | node | - | The current page number. |
| selected | bool | false | If |
| 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. |
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
styleOverridesproperty 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.