Pagination

Approved — Ready for dev

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

Pagination

Anatomy

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. Current indicator (24 x 8px)
  2. Next indicator (8px circle)

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

Specs

Color

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

Elevation

No elevation considerations needed for this component. 

Spacing


States

No new states to consider for pagination. 


Theming

No theming to consider for pagination. 


Placement

Carousel pagination 

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

Simple pagination 

The simple pagination is used when not attached to a table. It will be at the bottom of the content and centered. 


Behavior

Developer Docs

Vue Developer Docs

Component documentation coming soon!

Introduction
Anatomy
Specs
States
Theming
Placement
Behavior
Dev Docs
Dev Docs