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
Pagination is navigation for paginated content.

Example

View va-pagination in Storybook

Usage

When to use pagination

  • When it is not feasible to show all ordered data on a single page. Examples of content that should be paginated include search results or other multi-page collections of related items.

When to consider something else

  • If your content has meaningful groupings or categories.
  • Steps in a sequence
  • Short collections
  • When it is undesirable to have the user pause for navigation. Some alternatives include the infinite scroll pattern or simple un-numbered navigation.

Code usage

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
maxPageListLength max-page-list-length number 10 The maximum number of pages to show at once
page page number The current page number
pages pages number The total number of pages
showLastPage show-last-page boolean false Display last page number when the page count exceeds `maxPageListLength`

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
Edit this page in GitHub (Permissions required)
Last updated: Apr 21, 2022