Pagination

Components

use: deployed Web

Pagination is navigation for paginated content.

Examples

Usage

Results description

When using pagination, include a results description above the paginated content to help users understand their position within the full set of results. This is especially important for screen reader users and provides essential context for all users.

Text describing how many results are being shown.

Structure

The implementation should follow this format:

Showing 1–10 of 999 results for “[query]”
- When used in non-search contexts, omit the for "[query]" portion.
- If a filter is applied to the results, add “with X filters applied” to the end. This is not necessary when sorting is applied since the Sort component itself acts as the visual indicator.

Additional guidance

The results description should not be a heading, since it does not label or introduce a new section of content. A stable, targetable element (for example, an ID) is sufficient for focus management.
Avoid inline elements (such as <strong> or <span>) within the results description when possible. Plain text produces more consistent announcements across assistive technologies and reduces the risk of fragmented announcements, especially in VoiceOver.

Announcement approaches

Teams should use one of the following approaches to announce updated results.

Live region approach

Use role="status" on the results description to announce updates when the content changes.

role="status" provides an implicit aria-live="polite", so adding an explicit aria-live attribute isn’t necessary.

Focus management approach

Move focus to the updated results description after results change.

Add tabindex="-1" so the results description can receive programmatic focus.
The results description should be announced as a single cohesive sentence.

Additional considerations

If inline elements are required and you are using a live region approach other than role="status", aria-atomic="true" may help, but announcement behavior can still vary across screen readers.
Don’t combine live region and focus management approaches on the same results update, as this can create duplicate or repetitive announcements.

Make sure the results description updates whenever the set of results changes—for example, when the user moves to a different page of results or changes filters—so that the information stays accurate for all users. For more details on implementing search results with pagination, including placement of the results description, see the Search results template.

Code usage

Accessibility considerations

Component checklist

Web Platform

90%

10 of 11 complete

Maturity

Guidance: Web

Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
Research: Web

VFS team conducted research on this component which is linked from this page.
Stability: Web

Component has been in production for more than 3 months with no significant issues found.
Adoption: Web

Multiple teams have adopted this component.

Accessibility

While this component has been previously tested against older criteria, it has not yet been audited with the updated testing criteria.

Code assets

Variations: Web

Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Web

Component depicted in all responsive breakpoints.
Interactive states: Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.
Internationalization: Web

Describes i18n attributes.

Visual assets

Variations: Web

Figma library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Web

Component designed to work in all responsive breakpoints.
Interactive states: Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Legend:

Complete
Incomplete
N/A Not applicable

Provide feedback

Share your feedback, report issues, or suggest improvements for the Pagination component. Your input helps us make the design system better for everyone.

Get immediate support in #platform-design-system for technical or urgent issues.
Explore all feedback channels for additional ways to share your input.

Edit this page in GitHub (Permissions required)

Last updated: May 01, 2026

Examples

Default

With Middle

With Last

With Unbounded First

With Unbounded Middle

With Seven or Less

With Seven or Less Middle

With Seven or Less Last

Internationalization