Use pagination to let users move through an ordered collection of items that has been split into pages. Pagination should:

Only be used for lists with more than 25 items
Be placed at the bottom of a long list that has been split up into pages
Navigate to the previous and next set of items in the paged list
Hint when users are at the first or the last page by disabling the corresponding button

Usage

The Pagination component controls user input for both the current page and the page size. It also renders contextual information, like the current range of items.

Edit in Playroom

const sizes = [10, 20, 50];
const [page, setPage] = useState(1);
const [size, setSize] = useState(sizes[0]);
return (
  <Pagination
    onPageChange={setPage}
    onSizeChange={(val) => {
      setSize(val);
      // reset the current page, or calculate the value given the new size
      setPage(1);
    }}
    page={page}
    pageSize={size}
    pageSizes={sizes}
    totalItems={103}
  />
);

Labels

You may change the text labels shown to the user to provide contextual information.

Edit in Playroom

<Pagination
  onPageChange={() => {}}
  onSizeChange={() => {}}
  page={2}
  totalItems={103}
  itemsPerPageText="Employees per page:"
  itemRangeText={(min, max, total) => `${min}–${max} of ${total} employees`}
  pageRangeText={(current, total) => `of ${total}`}
  buttonPreviousText="Backward"
  buttonNextText="Forward"
/>