PaginationItem API
API documentation for the React PaginationItem component. Learn about the available props and the CSS API.
Import
import PaginationItem from '@mui/material/PaginationItem';
// or
import { PaginationItem } from '@mui/material';
Component name
The nameMuiPaginationItem
can be used when providing default props or style overrides in the theme.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 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.CSS
Rule name | Global class | Description |
---|---|---|
root | .MuiPaginationItem-root | Styles applied to the root element. |
page | .MuiPaginationItem-page | Styles applied to the root element if type="page" . |
sizeSmall | .MuiPaginationItem-sizeSmall | Styles applied to the root element if size="small" . |
sizeLarge | .MuiPaginationItem-sizeLarge | Styles applied to the root element if size="large" . |
text | .MuiPaginationItem-text | Styles applied to the root element if variant="text" . |
textPrimary | .MuiPaginationItem-textPrimary | Styles applied to the root element if variant="text" and color="primary" . |
textSecondary | .MuiPaginationItem-textSecondary | Styles applied to the root element if variant="text" and color="secondary" . |
outlined | .MuiPaginationItem-outlined | Styles applied to the root element if variant="outlined" . |
outlinedPrimary | .MuiPaginationItem-outlinedPrimary | Styles applied to the root element if variant="outlined" and color="primary" . |
outlinedSecondary | .MuiPaginationItem-outlinedSecondary | Styles applied to the root element if variant="outlined" and color="secondary" . |
rounded | .MuiPaginationItem-rounded | Styles applied to the root element if rounded="true" . |
ellipsis | .MuiPaginationItem-ellipsis | Styles applied to the root element if type="start-ellipsis" or type="end-ellipsis" . |
firstLast | .MuiPaginationItem-firstLast | Styles applyed to the root element if `type="first"` or type="last". |
previousNext | .MuiPaginationItem-previousNext | Styles applyed to the root element if `type="previous"` or type="next". |
focusVisible | .Mui-focusVisible | State class applied to the root element if keyboard focused. |
disabled | .Mui-disabled | State class applied to the root element if disabled={true} . |
selected | .Mui-selected | State class applied to the root element if selected={true} . |
icon | .MuiPaginationItem-icon | Styles applied to the icon to display. |
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.