Pagination

🧭 When to Use Pagination

Use Pagination when:

• You’re displaying a long list of items (like in a table or grid)

• Users need to know which page they’re on and navigate forward/backward

• You want consistent performance across views by limiting loaded data

Avoid Pagination when:

• Content can be loaded infinitely or progressively (in that case, consider infinite scroll)

• There are only 2–3 pages — use Next/Previous buttons or Tabs instead

🔘 Pagination Items

Pagination is made up of individual Pagination Items, each representing an interaction point in the control bar.

🧩 Pagination Item Types

• Numeric – A numbered page item (e.g. 1, 2, 3, 4)

• Forward – Advances to the next page (typically an arrow or chevron)

• Backward – Goes back to the previous page

• Overflow – Represents skipped pages visually as “...” between ranges

🎯 Item Statuses

Each pagination item can appear in the following statuses:

• Default – Idle and clickable

• Hover – Highlights to indicate interactivity

• Focus – Ring or outline for keyboard accessibility

• Selected – The current active page

• Selected Inverse – A variant of selected that is styled differently (often for dark mode or inverted themes)

🎨 Item Visual Types

• Transparent – Minimal styling, often just border or outline

• Filled – Background applied for stronger visual emphasis, especially on selected or hover states

🔲 Radius Options

• Rounded – Soft corners, usually used for subtle UI

• Circle – Perfectly circular items, often used when items are square in height/width or in mobile UI

These are set via component variants in Figma and follow system token values for border radius.

⏩ Jumpers (Unpublished Utility Components)

Jumpers allow users to directly jump to a specific page. They typically include a small text field or numeric input where the user can type a page number and press Enter.

Use cases:

• Large datasets with 50+ pages

• Admin tools, dashboards, or search platforms

• Enhances control and efficiency

Jumpers are built using an Input + Label + optional Submit icon, and are visually grouped near or inside the Pagination bar.

📏 Results Per Page Selector

This component lets users choose how many results to view per page (e.g., 10 / 25 / 50 / 100). It often appears alongside Pagination, either inline or in a settings dropdown.

Consider including:

• A label (“Results per page”)

• A Dropdown or segmented control

• A persistent display that updates as the user changes the value

This component is useful in table-heavy or data-rich interfaces.

♿ Accessibility Considerations

From a design perspective:

• Clearly distinguish the selected page

• Don’t rely on color alone—use background, weight, or shape to indicate selected/hover states

• Keep touch targets above 44x44px minimum

From a code perspective (if implemented):

• Use role="navigation" and aria-label="Pagination" on the container

• Mark numeric items with aria-current="page" when selected

• Arrows should include aria-label="Next page" and aria-label="Previous page"

• Overflow items (“...”) should not be focusable or clickable

✅ Best Practices

• Keep the number of visible page items small — 5 to 7 max is ideal

• Collapse edge pages using overflow dots in long sequences

• Always show the current page in the middle of the group if possible

• Provide both visual (pagination) and functional (jumper) navigation options in dense UIs

• Don’t forget mobile responsiveness — collapse to next/back arrows only or use scrollable pagination if needed