Pagination provides navigation for paged information, typically used with a table or multiple pages of content.
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)
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
The pagination color options can be either the affordance or guidance colors.
No elevation considerations needed for this component.
No new considerations for simple pagination. See quick action documentation if needed.
No theming to consider for pagination.
The carousel pagination will often be used for media content, cards or anywhere the user will swipe through multiple containers of content.
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.
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 DocsVue Developer Docs
Component documentation coming soon!