Skip to content
Edit this page

Pagination

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

Pagination

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

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

Rounded pagination

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

Pagination size

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

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 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} />

Controlled pagination

Page: 1

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

Router integration

Pagination supports two approaches for Router integration, the renderItem prop:

<Router>
  <Pagination
    count={10}
    renderItem={item => (
      <PaginationItem
        component={Link}
        to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
        {...item}
      />
    )}
  />
</Router>

And children:

<Router>
  <Pagination>
    {items.map(item => (
      <li key={item.type || item.page.toString()}>
        <PaginationItem
          component={Link}
          to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
          {...item}
        />
      </li>
    ))}
  </Pagination>
</Router>

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

API