<h2>What&#39;s new in v3</h2>
<ul>
<li><p>Padding: Desktop padding adjusted to XL (24px) to better match component height.</p>
</li>
<li><p><strong>Height:</strong> Updated to scale better across breakpoints:</p>
<ul>
<li>Desktop: 7xl (72px)</li>
<li>Tablet: 6xl (64px)</li>
<li>Mobile: 5xl (56px)</li>
</ul>
</li>
<li><p><strong>Sizes:</strong> Reduced number of sizes for simpler use and better modern breakpoint alignment:</p>
<ul>
<li>Desktop: 960px to 1440px+</li>
<li>Tablet: 480px to 960px</li>
<li>Mobile: 320px to 480px</li>
</ul>
</li>
<li><p><strong>Border radius:</strong> Added XS (2px) to match other components.</p>
</li>
<li><p><strong>Navigation buttons:</strong> Corrected spacing for size SM: 12px.</p>
</li>
<li><p><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</p>
</li>
</ul>
<h2>When to use</h2>
<p>Pagination helps users navigate through large amounts of content by dividing it into manageable pages. It keeps the experience organized, improves performance, and gives users control over how they browse information.</p>
<p>Use pagination when:</p>
<ul>
<li>You need to break long lists or large datasets into smaller sections so users aren’t overwhelmed.</li>
<li>Users should be able to move through content at their own pace without loading everything at once.</li>
<li>Performance and load time matter, and displaying only part of the content improves the experience.</li>
<li>It’s important for users to maintain their place while switching between pages.</li>
</ul>
<p>Pagination and progress tracker components are used for different scenarios and use cases.</p>
<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>
<p>The pagination component is comprised of the following elements:</p>
<details data-name='image-block' data-images='[{"alt":"The anatomy of pagination, labeled 1 through 9.","caption":"**Capacity**\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\n\n\n**Navigation**\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/v3/components/pagination/pagination-anatomy.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":"\nThe “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/v3/components/pagination/pagination-usage-on-page.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Embedded

Pagination can be used within components, such as tables, 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/v3/components/pagination/pagination-usage-embedded.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The following sizes are recommended for each of the three breakpoint ranges. Depending on the layout or available viewport space, the component may adjust or reprioritize its controls.

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

| Size                      | Use case                                                                                                                                                                                                                 |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Desktop: 960px to 1440px+ | Use the full pagination experience. All controls can be displayed, including items‑per‑page selection, page input, page range (e.g., “1–25 of 500 items”), and full navigation such as “First/Last” and “Previous/Next.” |
| Tablet: 480px to 960px    | Display a simplified layout. Prioritize essential navigation and page input. Optional labels, ranges, and secondary actions may be removed to preserve space and maintain clarity on medium viewports.                   |
| Mobile: 320px to 480px    | Use the most compact version. Navigation becomes minimal or icon‑only, and labels may be reduced. Keep only essential actions and the current page indicator to ensure usability on small screens.                       |

## 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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                                   | Collection | CSS var                                       | Preview   |
| -------------------------------------- | ---------- | --------------------------------------------- | --------- |
| pagination/desktop/padding             | Component  | `var(--dds-pagination-desktop-padding)`       | -         |
| pagination/desktop/height              | Component  | `var(--dds-pagination-desktop-height)`        | -         |
| border/radius/xs                       | Semantic   | `var(--dds-border-radius-xs)`                 | -         |
| pagination/desktop/width               | Component  | `var(--dds-pagination-desktop-width)`         | -         |
| color/background/SURFACE/neutral       | Semantic   | `var(--dds-color-background-surface-neutral)` | #FFFFFF   |
| pagination/gap/counter                 | Component  | `var(--dds-pagination-gap-counter)`           | -         |
| color/text/secondary                   | Semantic   | `var(--dds-color-text-secondary)`             | #293B4D   |
| spacing/xs                             | Semantic   | `var(--dds-spacing-xs)`                       | -         |
| pagination/pages-select/width          | Component  | `var(--dds-pagination-pages-select-width)`    | -         |
| input/gap/sm                           | Component  | `var(--dds-input-gap-sm)`                     | -         |
| file-input/file/padding-vertical       | Component  | `var(--dds-file-input-file-padding-vertical)` | -         |
| input/height/sm                        | Component  | `var(--dds-input-height-sm)`                  | -         |
| border/width/xs                        | Semantic   | `var(--dds-border-width-xs)`                  | -         |
| color/border/NEUTRAL/pale              | Semantic   | `var(--dds-color-border-neutral-pale)`        | #C5D4E3   |
| color/text/primary                     | Semantic   | `var(--dds-color-text-primary)`               | #1D2C3B   |
| icon/size/xs                           | Component  | `var(--dds-icon-size-xs)`                     | -         |
| color/text/NEUTRAL/rest                | Semantic   | `var(--dds-color-text-neutral-rest)`          | #1D2C3B   |
| color/text/tertiary                    | Semantic   | `var(--dds-color-text-tertiary)`              | #5C6E7E   |
| pagination/gap/navigation              | Component  | `var(--dds-pagination-gap-navigation)`        | -         |
| button/size/sm                         | Component  | `var(--dds-button-size-sm)`                   | -         |
| button/background/ghost-rest           | Component  | `var(--dds-button-background-ghost-rest)`     | #40586D00 |
| icon/size/sm                           | Component  | `var(--dds-icon-size-sm)`                     | -         |
| color/text/inactive                    | Semantic   | `var(--dds-color-text-inactive)`              | #B6B6B6   |
| button/gap/sm                          | Component  | `var(--dds-button-gap-sm)`                    | -         |
| button/padding-horizontal/sm           | Component  | `var(--dds-button-padding-horizontal-sm)`     | -         |
| pagination/gap/page                    | Component  | `var(--dds-pagination-gap-page)`              | -         |
| pagination/pages-input/width           | Component  | `var(--dds-pagination-pages-input-width)`     | -         |
| label/gap                              | Component  | `var(--dds-label-gap)`                        | -         |
| input/padding-horizontal/sm            | Component  | `var(--dds-input-padding-horizontal-sm)`      | -         |
| var(--dds-input-padding-horizontal-sm) | Semantic   | `var(--dds-color-text-brand-rest)`            | #0063B8   |
| pagination/tablet/padding              | Component  | `var(--dds-pagination-tablet-padding)`        | -         |
| pagination/tablet/height               | Component  | `var(--dds-pagination-tablet-height)`         | -         |
| pagination/tablet/width                | Component  | `var(--dds-pagination-tablet-width)`          | -         |
| pagination/mobile/padding              | Component  | `var(--dds-pagination-mobile-padding)`        | -         |
| pagination/mobile/height               | Component  | `var(--dds-pagination-mobile-height)`         | -         |
| pagination/mobile/width                | Component  | `var(--dds-pagination-mobile-width)`          | -         |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-pagination--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-pagination--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-pagination--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-pagination--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-pagination--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-pagination--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></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.