components

Pagination

Pagination allows users to navigate through large sets of data split across multiple pages. Breeze UI provides two pagination components: Pagination for offset-based pagination with known total items, and BasicPagination for cursor-based pagination without a total count.

Import

import { Pagination } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Navigate through large lists of data split across pages.
+When displaying all data at once would be impractical.
+Table or list views with server-side pagination.

When not to use

−For small lists that fit on one page.
−For infinite scroll implementations.
−For step-by-step wizards — use a custom stepper.

Examples

Code Samples

Offset-based Pagination

Standard pagination using currentPage, pageSize, and totalItems to calculate page numbers and navigation controls.

import { useState } from "react";
import { Pagination } from "@skedulo/breeze-ui-react";

export default function OffsetPagination() {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <Pagination
      currentPage={currentPage}
      pageSize={10}
      totalItems={100}
      onPageChange={(page) => setCurrentPage(page)}
    />
  );
}

Pagination with Large Dataset

Pagination for a large dataset showing how page numbers adapt with many pages.

import { Pagination } from "@skedulo/breeze-ui-react";

export default function LargeDatasetPagination() {
  return (
    <Pagination
      currentPage={25}
      pageSize={50}
      totalItems={2000}
    />
  );
}

Basic Pagination (Cursor-based)

BasicPagination is used when the total number of items is unknown. It provides simple previous/next navigation based on hasPreviousPage and hasNextPage flags, with custom children for page info display.

import { useState } from "react";
import { BasicPagination } from "@skedulo/breeze-ui-react";

export default function CursorPagination() {
  const [page, setPage] = useState(3);

  return (
    <BasicPagination
      hasPreviousPage={page > 1}
      hasNextPage={page < 5}
      onNextPage={() => setPage((p) => Math.min(p + 1, 5))}
      onPreviousPage={() => setPage((p) => Math.max(p - 1, 1))}
    >
      Page {page} of 5
    </BasicPagination>
  );
}

Guidelines

Do

✓Show the current page and total pages.
✓Provide next/previous navigation.
✓Keep page sizes reasonable (10-50 items).

Don't

✗Don't use pagination for fewer than 2 pages of content.
✗Don't change page size without user control.

API Reference

Prop	Type	Default	Description
currentPage*	number	—	The currently active page number (1-indexed).
pageSize*	number	—	The number of items displayed per page.
totalItems*	number	—	The total number of items across all pages. Used to calculate the total number of pages.
onPageChange	(page: number) => void	—	Callback fired when the user navigates to a different page.

Related Components

Table