Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Pagination

use: deployed Web
Pagination is navigation for paginated content.

Examples

Default

View va-pagination default in Storybook

With Middle

View va-pagination with middle in Storybook

With Last

View va-pagination with last in Storybook

With Unbounded First

View va-pagination with unbounded first in Storybook

With Unbounded Middle

View va-pagination with unbounded middle in Storybook

With Seven or Less

View va-pagination with seven or less in Storybook

With Seven or Less Middle

View va-pagination with seven or less middle in Storybook

With Seven or Less Last

View va-pagination with seven or less last in Storybook

Internationalization

View va-pagination internationalization in Storybook

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.

  • Showing 1–10 of 999 results for “[query]”. 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. For example: Showing 1–10 of 999 results.
  • Update when filters change. The results description must update when filters are changed so that all users can understand that the results have been updated. Implementation should follow this format:

Showing 1–10 of 999 results for “[query]” with 5 filters applied.

  • Do not reflect changes to sort. The Sort component itself acts as the visual indicator of the order.

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

Web

Attributes and Properties

Property Attribute Type Default Description ariaLabelSuffix aria-label-suffix string ''

Aria-label suffix text for buttons

 enableAnalytics enable-analytics boolean true

Whether or not an analytics event will be fired

 page page number

The current page number

 pages pages number

The total number of pages

 unbounded unbounded boolean false

Don’t show the last page if the unbounded flag is set

Events

Name Description component-library-analytics The event used to track usage of the component. Fires when a a page is selected if enable-analytics is true. pageSelect Fires when a page is selected

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.

Edit this page in GitHub (Permissions required)
Last updated: Apr 10, 2026