Pagination

Pagination divides long result sets into manageable pages, giving people control over what they see without flooding the screen. A well-designed pager communicates where the reader is, how many pages exist, and provides predictable ways to move forward, backward, or jump.

Choose pagination when users need precise page jumps or a clear sense of total results; use infinite scroll only when context is lightweight and wayfinding isn’t critical. Keep labels short, provide keyboard focus states, and make the current page unambiguous.

Standard pagination shows a linear sequence with previous/next controls and ellipses for gaps. Use it for search results, long tables, or archives where people may jump to the beginning, end, or nearby pages. Highlight the active page and keep hit areas large enough for touch.

Accessibility: expose pagination as a list of links, set aria-current="page" on the active item, and ensure arrow-only buttons include an accessible label (e.g., “Next page”). Maintain logical tab order and visible focus rings.

<ul class="pagination">
  <li><a href="...">...</a></li>
  <li class="active"><a href="...">...</a></li>
  <li><a href="...">...</a></li>
</ul>

Rounded pagination uses pill-shaped links to create a softer, button-like feel. Choose this style for mobile or touch-first layouts where extra padding improves hit targets, or when you want pagination to match rounded buttons elsewhere in the UI.

<ul class="pagination rounded"></ul>

Bullet pagination distills navigation into simple dots, ideal for carousels, slideshows, or short paged content where numbers would clutter the layout. Include clear hover/focus states and consider tooltips or aria labels (e.g., “Go to slide 3”) for clarity.

<ul class="pagination bullets"></ul>