Gallery
See what others have created
s1emens
@s1emens
Pagination
Design a pagination component for content-heavy interfaces like search results, tables, product listings, or article archives. The component should make page position obvious, let users move one page at a time, and support direct jumps when there are many pages.
Show a full desktop version with numbered pages, previous/next arrows, and optional first/last shortcuts. Use ellipsis to compress long ranges, but keep the current page centered when possible. The active page should read as the current location, not just a highlighted button.
Include states for default, hover, focus, disabled, and selected. If a page jump input or dropdown is included, make its behavior clear and keep it secondary to the main page controls.
Also design a compact version for narrow containers or mobile. Reduce visible page numbers, preserve tap targets, and make the pattern still usable when only prev/next and a few pages can fit.
What to deliver
- Design a pagination bar with page numbers, prev/next, and current-page state.
- Include first/last shortcuts where space allows.
- Show disabled, hover, active, and focus states.
- Provide a compact variant for tight layouts.
- Add a mobile-friendly version with reduced visible pages and jump behavior.
Imbue your design with visual cues such as color or size contrast to highlight the active page and make navigation more user-centric.