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.
- Current indicator (24 x 8px)
- Next indicator (8px circle)
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 states to consider for pagination.
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 pages of content.
The simple pagination is used when not attached to a table. It will be at the bottom of the content and centered.
Developer DocsVue Developer Docs
Component documentation coming soon!