Pagination
UI ComponentsA navigation pattern that divides content into discrete pages, allowing users to move between pages using numbered links or prev/next buttons.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Pagination coming soon.
How It Works in Apps/Websites
Pagination breaks large content sets into manageable pages. Core elements include: previous/next buttons, page numbers (often with ellipsis for long ranges), and current page indicator. Common in search results, product listings, and tables. Users can jump to specific pages or navigate sequentially.
How AI Interprets This Term
When you say 'pagination', AI expects: horizontal row of page number buttons, with prev/next arrows on sides. Current page is highlighted (different background). Ellipsis (...) for skipped pages. Usually shows first, last, and pages around current. Format: < 1 2 3 ... 10 >
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create pagination with prev/next buttons and page numbers
Design pagination: show first page, last page, and 2 pages around current with ellipsis between. Current page has blue background (#3b82f6), other pages have gray border. Prev/Next buttons with arrow icons, disabled when at ends.
Show numbered pagination vs 'Load more' button vs infinite scroll for same product list
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Long lists of items
- •Search results
- •Product catalogs
- •Data tables
When NOT to Use
- •Continuous content (use infinite scroll)
- •Few items
- •Real-time content
Related Terms
Infinite Scroll
A content loading pattern where new items automatically load and append to the page as the user scrolls down, creating an endless feed experience.
Table
A structured layout displaying data in rows and columns, allowing users to compare information and often including features like sorting, filtering, and pagination.