Resources
Intro & Anatomy
Pagination divides large amounts of content across multiple pages to improve performance and usability.
Use pagination for navigating through collections of items, pages, or images where displaying all content at once would overwhelm users or impact page performance.
MDX offers two pagination variants: numbered pagination for precise navigation and dotted pagination for visual content like image galleries or sliders.
Options & Styles
Variants
Numbers display specific page numbers for precise navigation through content
Dotted uses dots for sliders, galleries, and visual content where exact page numbers are less important
States
Pagination elements provide visual feedback:
Default for standard page indicators
Active highlights the current page or position
Hover for when users interact with a page number
Buttons
Icon buttons are included by default for previous/next navigation.
Regular buttons can be used instead of icon buttons depending on design needs
No buttons option available when only page indicators are needed
Truncation for Numbered Pagination
By default, a maximum of 7 pages are shown to maintain usability. When the total number of pages exceeds seven, the pagination list is truncated using ellipses to indicate hidden pages whilst preserving essential navigation context.
Truncation Rules
First and last pages are always displayed to provide clear boundaries
Previous and next pages relative to current position are always shown for immediate navigation
Current page context is preserved to maintain user orientation
Ellipses indicate where pages have been hidden from view
Actions
Truncated action provides a system-native flyout showing all available page numbers when users interact with the ellipsis, allowing quick navigation to any specific page.
Best Practice & Usage
Pagination should balance navigation efficiency with visual clarity. Use appropriate variants based on content type and user needs.
Keep numbered pagination to seven visible pages for optimal usability.
Avoid displaying more than seven page numbers to prevent cognitive overload. Truncate more pages.
Implement pagination when content spans more than five pages or sections.
Avoid pagination for very small content sets that don't benefit from division.
Use pagination for navigating through content collections, search results, or image galleries.
Avoid pagination for sequential processes; use progressive disclosure instead.
Theming
You can customise font styles and weights, colours, border width and radius, spacing and gaps to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons within tooltip content.