<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Pagination</td>
<td>Divide a collection of data or other content types into multiple pages showing a fixed number of items per page and navigate those pages.</td>
</tr>
<tr>
<td><a href="/components/progress-tracker/">Progress tracker</a></td>
<td>Progress trackers provide the status of each step within a multistep process and give visibility on the length of the overall sequence.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The anatomy of pagination, labeled 1 through 9.","caption":"The pagination component is comprised of the following elements:\n\nCapacity\n\n1. Label per page: describes the content divided by page, such as rows, images, or results.\n2. Capacity control: select component that allows the user to determine the number of items per page. The default values are 10, 25, 50, 100, and 250, but can be customized.\n3. Range label: describes what range of items are in view up to the total.\n\nNavigation\n\n4. First page button: takes the user back to the first page. \n5. Previous button: takes the user to the previous page.\n6. Next button: takes the user to the next page.\n7. Last page button: takes the user to the last page.\n8. Location: text input showing what page the user is viewing, which can also be used for navigation.\n9. Label of total pages: shows the number of pages based on the capacity of items per page.","url":"https://dds.dell.com/site/stage/9f/e0/Pagination_Anatomy_5c53ee133f.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/alternatives-pagination-listing-pages/","type":"External"},"title":"Alternatives to pagination article","description":"Read the Nielsen Norman Group&#39;s article on pagination.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Consider using the pagination component to make a large amount of related content more consumable to your users, or to optimize on-page real estate and load times in your experience. 

Pagination also aids in navigation between pages containing many related items.

Pagination elements allow users to control how much information they’d like to see per page and navigate all of the data or content types in a smaller, more controlled view. Controls are centered below the paginated items, whether it is on-page, below a table, or embedded in another component.

### On-page

Pagination is typically not required when there are 25 or fewer items per page. Depending on the context, however, consider reducing the capacity of items per page. Factors include smaller screen sizes or when other variables increase vertical scroll.

<details data-name='image-block' data-images='[{"alt":"Search results page showing items as cards with pagination controls at the bottom of the page.","caption":"The “First page” and “Previous” buttons are inactive when users are on the first page. Likewise, the “Next” and “Last page” buttons are inactive when users are on the last page.","url":"https://dds.dell.com/site/stage/b7/45/Pagination_Usage_On_Page_c50448289d.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Embedded

Pagination can be used within components, such as [tables](/components/table/), to help users navigate large data sets or other content.

<details data-name='image-block' data-images='[{"alt":"Pagination within a table component, showing the first 25 rows.","caption":"","url":"https://dds.dell.com/site/stage/fe/91/Pagination_Usage_Embedded_eb222c0475.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The following sizes are recommended for their respective pixel ranges. Layouts or viewport size can limit or reprioritize controls within the component.

<details data-name='image-block' data-images='[{"alt":"6 sizes of the pagination component.","caption":"","url":"https://dds.dell.com/site/stage/cf/cd/Pagination_Sizes_a46746c573.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Size           | Use case                                                                                                                                                                                                                                                                                   |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 1024 or larger | For 1024 pixels and larger, the component contains all of the elements for the capacity and navigation features.                                                                                                                                                                           |
| 768 to 1023    | Removes “Page label” from the navigation controls.                                                                                                                                                                                                                                         |
| 640 to 767     | Removes all labels within the navigation feature. “Previous” and “Next” buttons become icon only.                                                                                                                                                                                          |
| 480 to 639     | Removes all labels within the navigation feature and no longer states the total number of pages within the component. Additionally removes the label items “per page” on the capacity controls and reduces the overall height of the component.                                            |
| 360 to 479     | Includes only the preset interval select component within the capacity control. The navigation feature is reduced to “Previous” and “Next” icon-only buttons, and the current page input. The overall height of the component decreases further.                                           |
| 288 to 359     | Includes navigation elements as icon-only buttons. “First page”, “Previous”, “Next”, and “Last page” are all featured, as well as the current page input. The label containing the total number of pages is also shown. Additionally, the overall height of the component decreases again. |

## Standards

### Accessibility

#### Icon-only buttons should be used carefully and only after checking for accessibility

The meaning of the icon must be visually self-evident (easily and universally understood). In addition, a programmatically associated semantic label (such as an aria-label attribute) should be added so it can be read by screen readers. If you’re in any doubt that an icon-only button will be understood, use accompanying text in your button label.

WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)

#### All buttons except tertiary should have a contrast ratio of 3:1 or greater against the background, regardless of breakpoint or orientation (except if inactive)

Providing good contrast ratio on buttons ensures that anyone with low vision can see them and perceive their function. If the button variant doesn’t achieve adequate contrast with the background when viewed at a specific breakpoint, and/or in a particular orientation, either change the background or consider using a different button variant. The tertiary button is an exception and should have 4.5:1 contrast with its background at all times.

WCAG 2.2: [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)[](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)

#### Tertiary buttons require a 4.5:1 contrast ratio against the background

Greater contrast is required because the text is the only part of the button that is visible. These buttons are therefore considered similar to text and will require a higher contrast ratio.

WCAG 2.2: [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum), [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-pagination--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-pagination--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-pagination--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-pagination--basic&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-pagination--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-pagination--docs&viewMode=docs&websiteFrame=true'></details>

Pagination divides a collection of data or other content types into multiple pages showing a fixed number of items per page and is used to navigate between those pages.