Pagination Dots
Pagination reflects the user's progress through a set of steps, e.g. pages in a carousel or steps in a multi-step form. The "active" dot is darker and more prominent than the others, with steps further away decreasing in size.
Anatomy
Legend
- Active dot
- Inactive dot
Options
Active Item
A pagination dot can be set to active by setting the current index to the current index of the dot.
Current index: 1
Total
The total can be set from any range from 1 to any number.
Behavior
Dot transition
When the current index changes, the active dot will transition to the new index. The closer dots will transition to small dots, while further dots will transition to the smallest dots. The container will transition to the direction of the active dot.
Current index: 1
When total is < 5
When there is less than 5 but more than 3 one dot will be the smallest
Current index: 1
When total is < 4
When there is less than 4 all inactive dots will be the same size.
Current index: 1
Usage guidelines
Use to show hidden items
Pagination dots are great indicators when items are part of a larger group that is hidden.
Do not use on dark backgrounds
Currently, pagination dots have one color theme and cannot be used on dark backgrounds.
Specs
Size
The size of each pagination dot is dependent in its relation to either being active or how close it is to the active dot.
Spacing
All spacing between dots are 4px from each other.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)