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.

Imbue your design with visual cues such as color or size contrast to highlight the active page and make navigation more user-centric.