Pagination

Components

Use: Deployed

USWDS v3

Pagination is navigation for paginated content.

Examples

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).

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

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.

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

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.

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: