Overview
The Pagination Template structures controls that help users navigate through content split across multiple pages or screens.
When to Use
- When displaying long lists or search results
- When content is too large to load all at once
- For tables or galleries
- Show current page clearly
- Disable previous/next when at limits
- Keep the number of visible steps manageable (e.g., 5 max)
States
- Default: Unselected, idle state of a page number
- Active: The currently selected page number
- Hover: The page number being hovered over
Anatomy
- nv-button: Button component in lower emphasis.
- nv-button: Button component in lower emphasis.
- nv-button: Button component in lower emphasis.
- [Pagination]: Template component that can be detached if needed.
Look and feel
This template has been completely built with intentional tokens, giving the ability to display the right color scheme accordingly to the theme and mode where it is deployed.
Best Practice
- Keep link labels short and scannable
- Reserve right-aligned space for profile/actions if needed
- Keep alignment consistent (use design tokens)
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.