Pagination

Components

Use: Deployed

USWDS v3

Pagination is navigation for paginated content.

Examples

Usage

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`

unbounded unbounded boolean false Don't show last page when the page count exceeds `maxPageListLength` (but do show the ellipsis).

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

Maturity

Guidance: Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
Research: VFS team conducted research on this component which is linked from this page.
Stability: Component has been in production for more than 3 months with no significant issues found.
Adoption: 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: Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Component depicted in all responsive breakpoints.
Interactive states: Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: All design attributes (color, typography, layout, etc.) are available as tokens.
Internationalization: Describes i18n attributes.

Visual assets

Variations: Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Component designed to work in all responsive breakpoints.
Interactive states: Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: All design attributes (color, typography, layout, etc.) are available as tokens.

90% complete (10 of 11)

Legend:

Complete
Incomplete
Not applicable

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