Pagination

The Pagination component allows users to navigate through pages of content.

() => {
  const [value, setValue] = React.useState(1);
  return <Pagination count={10} value={value} onChange={setValue} />
}

Features

The Pagination component is a versatile component that can be used in a variety of ways.

Boundary Controls

You can add controls to jump to the first and last pages.

() => {
  const [value, setValue] = React.useState(5);
  return (
    <Pagination
      count={10}
      value={value}
      onChange={setValue}
      showBoundaryControls
    />
  );
}

Sibling and Boundary Count

You can control how many page numbers are displayed around the current page and at the boundaries.

() => {
  const [value, setValue] = React.useState(10);
  return (
    <Pagination
      count={20}
      value={value}
      onChange={setValue}
      siblingCount={2}
      boundaryCount={1}
      showSiblingControls={false}
    />
  );
}

Disabled State

You can disable the entire pagination component.

() => {
  const [value, setValue] = React.useState(5);
  return <Pagination count={10} value={value} onChange={setValue} disabled />
}

Anatomy

1.RowThe pagination is a `Row` component.

2.Boundary ControlControl to go to the first or last page.

3.Sibling ControlControl to go to the previous or next page.

4.Page ButtonButton to go to a specific page.

5.SeparatorSeparator between page buttons.

Reference

Props

The Pagination component inherits all of the props from the Row component and adds the following props.

Name	Type	Default	Description
`count`	`number`	-	The total number of pages.
`value`	`number`	-	The currently active page.
`onChange`	`(value: number) => void`	-	Callback fired when the page changes.
`siblingCount`	`number`	`1`	The number of page buttons to show on each side of the current page.
`boundaryCount`	`number`	`1`	The number of page buttons to show at the beginning and end of the page range.
`showSiblingControls`	`boolean`	`true`	Whether to show the previous and next page buttons.
`showBoundaryControls`	`boolean`	`false`	Whether to show the first and last page buttons.
`disabled`	`boolean`	`false`	Whether the pagination component is disabled.

Tokens

Warning

The Pagination component does not have specific component tokens yet. However, since it is composed of IconButton components, changing the IconButton tokens will affect the Pagination component as well.