Pagination usage guidelines

Pagination allows navigating across multiple pages of related content.

When to use

When displaying large datasets that cannot fit on a single page (e.g., search results, tables, or product listings).
To improve page load performance by only rendering a subset of data.
To enhance readability by breaking long lists into manageable sections.

When not to use

For small datasets that can be displayed in a single scrollable view.
If users need to compare multiple records across different pages, consider putting everything on a single-page view instead.

import { Pagination } from '@cimpress-ui/react';
import { useState } from 'react';

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

  return <Pagination aria-label="Pagination" currentPage={currentPage} pageCount={10} onPageChange={setCurrentPage} />;
}

Formatting and layout

Placement

Pagination controls should be placed at the bottom of the content section, with 16px spacing between the content section and the pagination component.

Items per page

For some content like data tables and lists it may be helpful to allow users to choose how many items they see per page. A select should be used in conjunction with the pagination component to achieve this. The select should always be left-aligned and the pagination component should always be right-aligned.

Title	Release date	Label	Chart position
Album #1	July 8, 1997	Interscope	1000
Album #2	July 8, 1998	Universal	999
Album #3	July 8, 1999	Interscope	998
Album #4	July 8, 2000	Universal	997
Album #5	July 8, 2001	Interscope	996
Album #6	July 8, 2002	Universal	995
Album #7	July 8, 2003	Interscope	994
Album #8	July 8, 2004	Universal	993
Album #9	July 8, 2005	Interscope	992
Album #10	July 8, 2006	Universal	991

Per page

Table alignment

View the table documentation to learn more about using pagination with the table component.