Custom Paginator
Custom Paginator
Custom Paginator displays page numbers with navigation arrows and ellipsis for large page counts.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Page Button Size | 32-40px |
| Border Radius | 4-8px |
| Font Size | 14-16px |
| Active Color | #001A41 |
| Disabled Color | #99A0A7 |
| Gap | 4-8px |
Pagination States
Section titled “Pagination States”Previous disabled, 1 highlighted
Both arrows enabled, current shown
Next disabled, last highlighted
Ellipsis shown for hidden pages
Configuration Options
Section titled “Configuration Options”| currentPage | number | 1 | Active page (1-based) |
| totalPages | number | 1 | Total page count |
Page Display Logic
Section titled “Page Display Logic”| Total Pages | Display Pattern |
|---|---|
| ≤5 | All pages shown |
| 6+ | Current page ± 2, with 1…N at ends |
Examples
Section titled “Examples”| Current | Total | Display |
|---|---|---|
| 1 | 10 | 1 2 3 4 5 ... 10 |
| 5 | 10 | 1 ... 3 4 5 6 7 ... 10 |
| 10 | 10 | 1 ... 6 7 8 9 10 |
Arrow States
Section titled “Arrow States”| Arrow | Condition | Color |
|---|---|---|
| Previous | currentPage > 1 | #001A41 |
| Previous | currentPage === 1 | #99A0A7 |
| Next | currentPage < totalPages | #001A41 |
| Next | currentPage === totalPages | #99A0A7 |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Data tables
- Search results
- Product listings
- Article feeds
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Show current position | Lost in pagination |
| Disable end arrows | Confusing navigation |
| Reasonable page counts | Too many pages |
| Direct page access | Next/prev only |
| Maintain state | Lost page on reload |