Approved — Ready for dev

Pagination provides navigation for paged information, typically used with a table or multiple pages of content.



Carousel pagination 

The carousel pagination variant is used when needing to swipe between content. This content may be photos, cards, etc. The number of indicators will be defined by the number of items in the carousel.

  1. Active indicator (24 x 8px)
  2. Inactive indicator (8px x 8px)

Simple pagination 

The simple pagination by itself is used in more compact areas and may be most commonly used on a mobile device or within the complex pagination component. 

  1. Back trigger - Small No Emphasis Quick Action Button
  2. Forward trigger - Small No Emphasis Quick Action Button
  3. Page label - Body 1
  4. Page numbers - Body 1



The pagination color options can be either the affordance or guidance colors.

Element Property Value
Current Indicator Background color ∆colorBrandedGuidanceAccessible
Next Indicator Background color ∆colorBrandedGuidance200
Quick Action Buttons Icon color No emphasis guidance colors (See QAB documentation)
Page Numbers Text color ∆colorPlatformGray900
Enteries Text color ∆colorPlatformGray900


No elevation considerations needed for this component. 



Simple Pagination

No new considerations for simple pagination. See quick action documentation if needed.

Carousel Pagination 


No theming to consider for pagination. 


Carousel pagination 

The carousel pagination will often be used for media content, cards or anywhere the user will swipe through multiple containers of content. 

Simple pagination 

The simple pagination is used when many pages of data needs to be sorted through. It will be at the bottom of the content and centered. 


Carousel pagination 

As the items in the carousel are moving between pages, the bottom pagination will smoothly transition from dot to dot. The user can either drag the cards to make the pagination change or if they were to click into the next one, it will center it for them into view.

Developer Docs

Vue Developer Docs

Component documentation coming soon!