Pagination

import { Pagination } from '@govie-ds/react';

<Pagination currentPage={5} totalPages={10} />

  TBD

  TBD

When to use this component

Use the Pagination component when you need to display a set of paginated content across multiple pages. It’s especially useful for content-heavy applications, where users need to navigate between pages of results or items. It helps to:

• Break down large sets of data or content into smaller, more manageable chunks.
• Provide intuitive and clear navigation controls, such as "Previous", "Next", and specific page numbers.
• Dynamically adjust the number of pages based on the total content available.

Typical use cases:

• Pagination in a blog or article listing.
• Navigating between pages in search results.
• Handling large datasets in dashboards or analytics platforms.

When not to use this component

Avoid using the Pagination component when:

• The content is not split into multiple pages, and all data can be shown at once without performance concerns.
• Your design requires infinite scrolling or loading data dynamically as the user scrolls, instead of dividing it into fixed page numbers.
• You don't want to provide manual control to navigate between pages (e.g., for very simple content where only a single page is required).

Consider other navigation or layout patterns when:

• The number of pages is so large that pagination becomes cumbersome.
• You have complex filtering or sorting systems that could be better navigated using a different UI paradigm (e.g., a side navigation bar or collapsible sections).

Accessibility Considerations

• Ensure that screen readers can properly announce the active page and total pages.
• Provide clear visual indicators of the current page, using styles or ARIA roles to enhance accessibility.