Pagination

Approved — Ready for dev

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

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.

Active indicator (24 x 8px)
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.

Back trigger - Small No Emphasis Quick Action Button
Forward trigger - Small No Emphasis Quick Action Button
Page label - Body 1
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

Simple Pagination

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

Carousel 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 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.

Behavior

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!