Pagination

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to divide a large content set into pages.

What to draw

Show the current page, numbers, and previous or next where applicable. Distinguish unavailable controls.

How it behaves

Selecting a page loads its content. Links use Enter; buttons also support Space. Ellipses are not controls.

What to document in Figma

Define destinations, pagination name, and how the current page is communicated. For partial updates, record where focus stays or moves.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Pagination.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you visually tell that this is a navigation group for related pages?
Before interacting, can you visually tell which page is current?
Before interacting, can you visually identify available controls, unavailable controls, and omitted pages?
With ellipses or compact page listings, is it clear that there are undisplayed intermediate pages?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over actionable controls?
Is there visual feedback when clicking an actionable control?
Does clicking a page, previous, or next load the corresponding content?
After loading, are the current page, page title, and previous/next controls updated?
Do unavailable controls, such as "previous" on the first page or "next" on the last, make clear that they cannot be activated?

Designing for gesture use

Do touch targets have enough area for comfortable activation?
Is there visual feedback when activating a pagination control?
Does activating a page load its related content and update the current page indicator?
On smaller screens, is the number of displayed pages reduced without hiding current, previous, next, first, and last pages when needed?

Designing for keyboard use (any non-pointing device)

Is there visual feedback when focusing each actionable control?
Can you navigate between actionable controls using TAB and SHIFT+TAB?
Can page links be activated with the ENTER?
Controls implemented as buttons can be activated with ENTER and SPACE?
Are ellipses used only to indicate hidden pages excluded from the focus order?
After changing pages, focus is managed consistently, moving to the start of new content or remaining at a predictable point in the flow.

Designing for screen reader use

When navigating landmarks, can you identify pagination as a navigation region with a clear accessible name?
When focusing an actionable control, can you hear whether it is a link or button?
When focusing a page number, can you hear its number and purpose, for example "Page 3"?
When focusing the current page, can you hear that it is the current page through aria-current="page"?
When changing pages, is new content or the screen's new state perceptible to screen reader users?

Interaction methods

Possible interaction methods for components of type Pagination.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

On hover, each actionable control should provide visual feedback confirming that interaction is possible.
Clicking a page number should load its corresponding content.
Clicking "previous" or "next" should load the immediately preceding or following page's content.
The current page should have a distinct visual indicator and a semantic update.
Unavailable controls should appear disabled and should not perform actions.

Keyboard interaction (any non-pointing device)

When focused with the keyboard, each actionable control should provide visual feedback with a visible focus indicator.
It should be possible to navigate to the next or previous item using the TAB or SHIFT+TAB keys respectively.
Pagination links should be activated with the ENTER.
Pagination buttons used in dynamic experiences should be activated with the ENTER and SPACE.
The current page should be identified with aria-current="page".
Purely visual items, such as ellipses, should not receive keyboard focus.

Keyboard (or gesture) interaction + screen reader

When focusing the pagination group, you can identify it as navigation.
When there are multiple navigation regions, pagination's accessible name should distinguish its purpose, for example "Search results pagination".
When focusing an actionable control, you should hear its accessible name, role, and state.
The current page should be announced as the current page.
When changing pages reloads only part of the screen, the content change must be perceptible and focus must follow a consistent strategy.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing pagination

Keyboard navigation

WHEN I use the Tab key to move focus to pagination controls
The focus I SEE is strongly indicated visually
THEN, when I use the Enter to activate a page link
I SEE the selected page's content loaded
AND I SEE the current page's visual indicator updated

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and use the Tab key to move focus to a pagination control
- I HEAR that pagination is identified as a navigation region.
- I HEAR pagination's accessible name.
- I HEAR each control's name, such as previous page, next page, or a specific page.
- I HEAR the current page indicated when focus is on the corresponding item.
THEN, when I use the Enter to activate a pagination control
I HEAR or perceive that the browser is going to other content or the page content was updated.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus a pagination control, the following happens:
- I HEAR that pagination is identified as a navigation region.
- I HEAR pagination's accessible name.
- I HEAR each control's name, such as previous page, next page, or a specific page.
- I HEAR the current page indicated when focus is on the corresponding item.
THEN, when I double-tap to activate a pagination control
I HEAR or perceive that the browser is going to other content or the page content was updated.

Considerations

References

Additional references for components of type Pagination.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.