Components
Pagination
Use: Deployed
Pagination is navigation for paginated content.
Examples - v1
Default
View va-pagination default in Storybook
View va-pagination default in StorybookExamples - v3
Default
View va-pagination v3 default in Storybook
With Middle
View va-pagination v3 with middle in Storybook
With Last
View va-pagination v3 with last in Storybook
With Unbounded First
View va-pagination v3 with unbounded first in Storybook
With Unbounded Middle
View va-pagination v3 with unbounded middle in Storybook
With Seven or Less
View va-pagination v3 with seven or less in Storybook
With Seven or Less Middle
View va-pagination v3 with seven or less middle in Storybook
Internationalization
View va-pagination v3 internationalization in Storybook
Usage
Refer to the U.S. Web Design System for usage guidance
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). Only relevant if uswds is true. |
uswds |
uswds |
boolean |
false |
Whether or not the component will use USWDS v3 styling. |
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
Refer to the U.S. Web Design System for accessibility guidance
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
- Accessible use of color
- Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
- Accessible contrast
- Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3). Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
- Keyboard interactions
- Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. All interactive elements can be selected and activated using the keyboard.
- Content zoom tested
- Component has been tested with the display set to 400% at 1280px viewport width to ensure that the component does not have overlapping text or elements and all interactive elements still operate.
- Tested in screen readers
- Tested with screen readers to ensure there are no issues with reading order, spelling, dynamic content, and interactive elements.
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.
93% complete (15 of 16)
Legend:
- Complete
- Incomplete
- Not applicable