Forma 36 - Pagination

Import

import { Pagination } from '@contentful/f36-pagination';

Examples

Basic


function PaginationExample() {
  const [page, setPage] = useState(1);

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      totalItems={120}
      itemsPerPage={10}
    />
  );
}function PaginationExample() {
  const [page, setPage] = useState(1);

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      totalItems={120}
      itemsPerPage={10}
    />
  );
}

Props (API reference)

Open in Storybook

Name	Type	Default
activePage required	number Sets which page is active on the Pagination
itemsPerPage required	number Sets how many items are displayed per page
onPageChange required	(page: number) => void Handler function called when user navigates to another page on the pagination.
totalItems required	number Total amount of items the pagination is applied to.
className	string CSS class to be appended to the root element
testId	string A [data-test-id] attribute used for testing purposes

Content guidelines

onPageChange prop must update the list displayed to the user based on the page navigated to.

Accessibility

All the necessary a11y attributes are provided for the pagination elements.
Pass an aria-label to the Pagination to give more context to screen readers.

Pagination

Alpha component

Import

Examples

Basic

Props (API reference)

Name

Type

Default

Content guidelines

Accessibility

Help improve this page