Pagination

ECT approvedUpdated May 21, 2026

Description

Pagination lets users move through a list of items displayed over several pages.
When a list contains too many items to fit on 1 page, split it over several pages so it's easier for users to understand.

Figma library

Anatomy

Anatomy

Size

Pagination is available in S, M and L sizes.
Width is responsive.

Variations

Large screen

Typical

No container

First and last button

Items per page

Page input not interactive

All elements

Small screen

When horizontal space is limited, controls should stack for readability.

Typical

No container

First and last buttons

Items per page

Page input not interactive

All elements

Examples

Pagination for stacked cards

Pagination for a single page table

Best practices

Use 1 pagination per page.
Position pagination in the same place on every page.
Do not use sticky (fixed-position) pagination at the bottom of the page, as it can cause usability issues, particularly when users zoom in.
Do not use infinite scrolling to load content because this causes problems for keyboard users. Use pagination instead.
Do not use pagination for linear journeys. For example, filling in a form.
Use the step flow instead to let the user move to the next or previous page.
Do use “items” as the default term. This can be changed to "rows", “records”, “results”, or another term that's more appropriate for a specific product.

Technical example

Pagination component implemented in Carbon

Requirements

Users should be able to:

Navigate between pages of content using assistive technology.
Understand what page they are on and how many pages of content there are.
Skip to different pages of content.

Interactions

When the pagination is on the first or last page, some of the elements within the pagination should be non-interactive. At this point, the buttons should be disabled and have no associated actions.

Some elements within the pagination may not have visible labels. In this case, clear context should be given using surrounding content and clear accessible names.

Mouse interactions

Buttons to move between pages should have a minimum target size of 24 x 24px.
Users should not be able to interact with ‘previous’ or ‘next’ buttons at either end of the pagination range.

Keyboard interactions

Tab. Where interactive current page controls exist, the Tab key moves focus from the previous interactive element on the page to the ‘current page’ input within the pagination. Otherwise, the first interactive element should receive initial focus.
Pressing ‘tab’ again moves focus between interactive elements within the pagination.
Typing a number into the ‘current page’ input updates the page.
Enter or Space. Activates the navigation buttons within the pagination.
The focus should remain on the navigation buttons when navigating between pages.
When elements in the pagination are unavailable, they should be hidden and not be keyboard focusable.

Small screen interactions

Some elements may be removed at smaller screen sizes, provided the user is still able to perform the equivalent actions with the remaining elements.

Removable items may include ‘first’ and ‘last’ buttons, as the user is still able to get to the first and last pages through the current page input, or the navigation buttons.

Design considerations

Make sure that the pagination element has a clear visual border, so that screen magnifier users can track all related elements within the pagination area.

Development considerations

The current page input should have an accessible name given by an aria-label.
The icon-only navigation buttons should also have accessible names given by an aria-label. They should clearly describe where each button navigates to. For example:
First and last page buttons — "Go to first/last page."
Previous and next page buttons — "Go to previous/next page."
Make sure disabled elements have a disabledattribute which is communicated to screen reader users.
Make sure that page updates are relayed to screen reader users using appropriate aria-live regions for loading and updated states.
When the page change is loading, announce it to screen reader users using aria-live=”polite”.

Date	Changes
April 2026	Updated nav buttons to icon-only across all screen sizes to better accommodate different variants at different breakpoints.Updated a11y guidance for these icon-only buttons.Updated first and last button icons from << >> to
March 2026	Updated guidance on using pagination when the list only has 1 page.
August 2025	Updated guidance on the accessibility tab.
July 2025	Removed advance variation.
January 2025	Added border and background in default state.Added a floating state in case it is used in another design and needs to be rounded.Standardised dropdown type on the right side to match the page number input on the left.Removed small screen breakpoint because it was essentially the same as the large screen one and it could be adjusted manually.
September 2024	New version created. Previous version archived in the frozen Product design system.