Pagination

The Pagination component enables the user to select a specific page from a range of pages.

Basic pagination

<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />
<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

Press Enter to start editing

Outlined pagination

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />
<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />

Press Enter to start editing

Rounded pagination

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />
<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

Press Enter to start editing

Pagination size

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />
<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

Press Enter to start editing

Buttons

You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons.

<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />
<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />

Press Enter to start editing

Custom icons

It's possible to customize the control icons.

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>
<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

Press Enter to start editing

Pagination ranges

You can specify how many digits to display either side of current page with the siblingRange prop, and adjacent to the start and end page number with the boundaryRange prop.

<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />
<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />

Press Enter to start editing

Controlled pagination

Page: 1

<Typography>Page: {page}</Typography>
<Pagination count={10} page={page} onChange={handleChange} />
<Typography>Page: {page}</Typography>
<Pagination count={10} page={page} onChange={handleChange} />

Press Enter to start editing

Router integration

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>
<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

Press Enter to start editing

`usePagination`

For advanced customization use cases, a headless usePagination() hook is exposed. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component is built on this hook.

import usePagination from '@mui/material/usePagination';

Table pagination

The Pagination component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog.

For the pagination of a large set of tabular data, you should use the TablePagination component.

<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>
<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>

Press Enter to start editing

You can learn more about this use case in the table section of the documentation.

Accessibility

ARIA

The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the getItemAriaLabel prop.

Keyboard

The pagination items are in tab order, with a tabindex of "0".

Pagination

Basic pagination

Outlined pagination

Rounded pagination

Pagination size

Buttons

Custom icons

Pagination ranges

Controlled pagination

Router integration

usePagination

Table pagination

Accessibility

ARIA

Keyboard

API

`usePagination`