Components
Pagination
Use: DeployedExamples
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
With Seven or Less Last
View va-pagination with seven or less last in Storybook
Internationalization
View va-pagination v3 internationalization in Storybook
Usage
Code usage
Attributes and Properties
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
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.
Legend:
-
Complete -
Incomplete -
Not applicable