Pagination

The <Pagination> component is a GraphQL connection-addapted component that is used to navigate through pages of high-volume content

Large pagination

<Flex justifyContent="flex-start">
  <LargePagination
    hasNextPage
    pageCursors={{
      first: { page: 1, cursor: "Y3Vyc29yMg==", isCurrent: false },
      last: { page: 20, cursor: "Y3Vyc29yMw==", isCurrent: false },
      around: [
        { page: 6, cursor: "Y3Vyc29yMw==", isCurrent: true },
        { page: 7, cursor: "Y3Vyc29yMg==", isCurrent: false },
        { page: 8, cursor: "Y3Vyc29yMw==", isCurrent: false },
        { page: 9, cursor: "Y3Vyc29yMw==", isCurrent: false },
      ],
      previous: { page: 5, cursor: "Y3Vyc29yMw==", isCurrent: false },
      " $refType": null,
    }}
    onClick={() => {}}
    onNext={() => {}}
  />
</Flex>

Mobile pagination

<SmallPagination
  hasNextPage
  pageCursors={{
    first: { page: 1, cursor: "Y3Vyc29yMg==", isCurrent: false },
    last: { page: 20, cursor: "Y3Vyc29yMw==", isCurrent: false },
    around: [
      { page: 6, cursor: "Y3Vyc29yMw==", isCurrent: true },
      { page: 7, cursor: "Y3Vyc29yMg==", isCurrent: false },
      { page: 8, cursor: "Y3Vyc29yMw==", isCurrent: false },
      { page: 9, cursor: "Y3Vyc29yMw==", isCurrent: false },
    ],
    previous: { page: 5, cursor: "Y3Vyc29yMw==", isCurrent: false },
  }}
  onClick={() => {}}
  onNext={() => {}}
/>
On this page
Large pagination
Mobile pagination