Skip to content
Edit this page

PaginationItem API

The API documentation of the PaginationItem React component. Learn more about the props and the CSS customization points.

Import

import PaginationItem from '@material-ui/lab/PaginationItem';
// or
import { PaginationItem } from '@material-ui/lab';

You can learn more about the difference by reading this guide.

Props

Name Type Default Description
color 'standard'
| 'primary'
| 'secondary'		 'standard' The active color.
component elementType The component used for the root node. Either a string to use a DOM element or a component.
disabled bool false If true, the item will be disabled.
getAriaLabel func function defaultGetAriaLabel(type, page, selected) { if (type === 'page') { return ${selected ? '' : 'go to '}page ${page}; } return Go to ${type} page;} Accepts a function which returns a string value that provides a user-friendly name for the current page.

Signature:
function(type?: string, page: number, selected: bool) => string
type: The link or button type to format ('page'
onClick func Callback fired when the page is changed.

Signature:
function(event: object, page: number) => void
event: The event source of the callback.
page: The page selected.
page number The current page number.
selected bool If true the pagination item is selected.
shape 'round'
| 'rounded'		 'round' The shape of the pagination item.
size 'small'
| 'medium'
| 'large'		 'medium' The size of the pagination item.
type 'page'
| 'first'
| 'last'
| 'next'
| 'previous'
| 'start-ellipsis'
| 'end-ellipsis'		 'page'
variant 'text'
| 'outlined'

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

CSS

  • Style sheet name: PaginationItem.
  • Style sheet details:
Rule name Global class Description
root .root-44 Styles applied to the root element.
outlined .outlined-45 Styles applied to the button element if outlined="true".
textPrimary .textPrimary-46 Styles applied to the button element if variant="text" and color="primary".
textSecondary .textSecondary-47 Styles applied to the button element if variant="text" and color="secondary".
outlinedPrimary .outlinedPrimary-48 Styles applied to the button element if variant="outlined" and color="primary".
outlinedSecondary .outlinedSecondary-49 Styles applied to the button element if variant="outlined" and color="secondary".
rounded .rounded-50 Styles applied to the button element if rounded="true".
ellipsis .ellipsis-51 Styles applied to the ellipsis element.
icon .icon-52 Styles applied to the icon element.
sizeSmall .sizeSmall-53 Pseudo-class applied to the root element if size="small".
sizeLarge .sizeLarge-54 Pseudo-class applied to the root element if size="large".
disabled .disabled-55 Pseudo-class applied to the root element if disabled={true}.
selected .selected-56 Pseudo-class applied to the root element if selected={true}.

You can override the style of the component thanks to one of these customization points:

If that's not sufficient, you can check the implementation of the component for more detail.

Demos