Pagination – Carbon Design System

Preview the pagination component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Live demo

Theme selector

Items per page:

1–10 of 103 items

of 11 pages

CodeSandbox React Angular Vue Vanilla

Live editor for the Pagination component


  <div style={{width: '800px'}}>
    <Pagination
      backwardText="Previous page"
      forwardText="Next page"
      itemsPerPageText="Items per page:"
      page={1}
      pageNumberText="Page Number"
      pageSize={10}
      pageSizes={[
        10,
        20,
        30,
        40,
        50
      ]}
      totalItems={103}
    />
  </div>


  <div style={{width: '800px'}}>
    <Pagination
      backwardText="Previous page"
      forwardText="Next page"
      itemsPerPageText="Items per page:"
      page={1}
      pageNumberText="Page Number"
      pageSize={10}
      pageSizes={[
        10,
        20,
        30,
        40,
        50
      ]}
      totalItems={103}
    />
  </div>

Edit this page on GitHub

Pagination: Style

Pagination: Accessibility