React Components

# Pagination

_A **Pagination** component allows users to navigate through large sets of data by dividing the content into multiple pages._

102550100300

of 100 results

Go to page

## Overview

---

The **Pagination** component is used to divide content into discrete pages and provide navigation controls to move between them.

This component enhances usability by allowing users to browse through large sets of data without overwhelming the interface.

**Pagination** can include various controls like next/previous buttons and page numbers.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Pagination</td></tr><tr><th scope="row">Also known as</th><td>Page navigation</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=47-7743" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/pagination" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-pagination--documentation" target="_blank">Previous major version<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

A **Pagination** component is used in two situations :

-   To navigate among a  component
-   To browse in a set of items (products list, ...)

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use Pagination when users need to navigate through large datasets in a structured and orderly way |
| - Ensure Pagination is used when the total number of pages is known or predictable |
| - Display a reasonable number of items per page (typically around 20–30) to balance readability and navigation |
| - Use Next/Previous buttons and page numbers to help users track their position within the dataset |

| ❌ Don't |
| --- |
| - Don't use Pagination when the total content fits into a single page |
| - Avoid Pagination if the number of pages is unpredictable or constantly changing. In those cases, consider infinite scrolling or "Load more" patterns instead |
| - Don't make Pagination the only method of navigation if users might need to filter or search within the dataset |

### Best Practices in Context

1.  **Pagination**
2.  **Total items per page select**
3.  **Total amount of items**
4.  **Previous/Next buttons**
5.  **Ellipsis**
6.  **Current page button**
7.  **Unselected page button**

## Placement

---

**Pagination** is presented to the user near the container it uses for pagination; it can be located just above or below it.

Usually, the **Pagination** is end-aligned horizontally, as its usage is not principal to the container.

## Behavior

---

### Amount of items per page

The number of items displayed in **Pagination** is depending on its referential.

However, there are few rules to be applied to display it correctly.

Number of items in the component can be chunked in packs of :

-   10
-   25
-   50
-   100
-   300

This value is conditioning the number of items that will be displayed per page.

By default, 10 items per page are displayed, but it can be set to match your need.

### Amount of pages

A maximum of 6 numbered page  can be visible at once, with a minimum of 1.

Arrow Buttons are always visible, no matter what the amount of pages.

Depending on the current page number and the amount of pages, here are the different displays of the whole component:

-   If amount of pages is less than 7, all numbered page  can be visible at once
-   If amount of pages is 7 or more :
-   If current page is the 4th one or less, the first 5 numbered  are present, then an ellipsis and the last numbered  corresponding of the amount of pages
-   If current page is the 4th to last or more, the first page  is displayed followed by an ellipsis and the last 5 numbered 
-   If current page is between the previous bounds are displayed, in order :
-   the first page ,
-   an ellipsis,
-   3 numbered , corresponding to : previous-to-current / current / next-to-current page,
-   an ellipsis,
-   the last numbered 

### Go to page

Allows users to directly select a page from an number input.

## Navigation

---

### Focus Management

When tabbing through the page, focus moves sequentially through all interactive elements in the **Pagination** component.

The current page Button is not interactive.

Disabled navigation Buttons (e.g., “Previous” on the first page) are skipped in the tab order.

### General Keyboard Shortcuts

Pressing Tab moves focus forward through all interactive elements in the **Pagination** (Select, Buttons).

Pressing Shift + Tab moves focus backward.

Pressing Enter or Space on a page button, "Previous", or "Next" triggers the corresponding page change.

The "items per page" Select uses the same keyboard shortcuts as the standard Select component.

## Accessibility

---

**Pagination** component should be properly identified, and correct labels must be implemented to ensure it is accessible to assistive technologies.

### Identifying the Pagination with aria-label

**Pagination** is a form of navigation, but it serves a specific purpose distinct from primary navigation menus. To ensure it is correctly recognized, an [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) should be added to explicitly identify it.

```jsx
<Pagination
  aria-label="Pagination"
  totalItems={5000}
>
  <PaginationPages />
</Pagination>
```

Screen readers will announce the pagination element correctly.