# Pagination
## Overview
Pagination helps users manage large amounts of data by splitting it into manageable sections, allowing smooth navigation between content pages.
{% embed url="" %}
## When to use
* Use pagination when the data set is too large to display on one screen, such as in a product listing or database results.
* Pagination is ideal when users need to navigate through long lists, tables, or collections without overwhelming them with all data at once.
* Use pagination in blogs or news websites where multiple articles are organized into pages for better readability and access.
* When displaying search results, pagination allows users to browse results in chunks without loading the entire dataset.
## When not to use
* Avoid pagination when there is only a small amount of content, as it adds unnecessary navigation steps.
* Do not use pagination in interfaces where continuous scrolling is more appropriate, such as social media feeds.
* If users only need to browse a few items quickly, pagination can hinder the experience by requiring extra clicks.
* Pagination is not ideal if users need to access non-sequential sections frequently; in this case, consider a more flexible navigation option.
* Do not use pagination if users need to see all items at once for comparison or decision-making purposes.
## Types
Type
Description
Numbers
A numbered system for navigating between content sections.
Simple
Basic pagination ideal for quick, minimal navigation on smaller screens.
Advance
More complex pagination system, providing multiple navigation options.
## Anatomy
#### Advanced Variant
1. **Page Number Menu:** A list of clickable page numbers that allow users to jump directly to a specific page.
2. **Viewing Range:** Displays the number of items being viewed out of the total number of items.
3. **Container:** The structure that holds all pagination elements.
4. **Active Page:** The current page number is highlighted to indicate the user’s current position.
5. **Previous and Next Buttons:** Controls for moving sequentially through the pages.
#### Numbers Variant
1. **Previous and Next Buttons:** Navigation controls to move forward or backward through the pages.
2. **Selected Page:** The specific page a user is currently viewing.
3. **Page Number Menu (icon only):** Indicates additional pages not shown, accessible by expanding the 3-dot icon.
## Size
| Size | Number Button (px) | Text and number (px) | Icon (px) | Container Height (px) |
| ------ | ------------------ | -------------------- | --------- | --------------------- |
| Small | 14 | 12 | 16 | 32 |
| Medium | 16 | 14 | 20 | 40 |
| Large | 18 | 16 | 24 | 48 |
## Accessibility
* **Keyboard Navigation:** Pagination should be navigable using keyboard controls, such as arrow keys, tabbing between buttons, or number shortcuts.
* **Screen Reader Compatibility:** Ensure that each page control is labeled clearly for screen readers, so users know which page they are on and how to move between them.
* **Visible Focus State:** Make sure pagination controls have a visible focus state when navigated with a keyboard to ensure accessibility for users with disabilities.
* **Responsive Design:** Pagination should adapt to different screen sizes, providing easy navigation on both mobile and desktop interfaces.
* **Large Click/Tap Targets:** Make sure that buttons for navigation, such as "Next" and "Previous," are large enough to click or tap easily on both desktop and mobile.
## Example
* **E-commerce Product Listings:** Paginate product listings to make it easier for customers to browse through large catalogs without loading all items at once.
* **Blog Article Listings:** On a blog website, pagination helps divide articles into pages, improving both the browsing experience and load time.
* **Search Results Pages:** Pagination is often used to present search results, allowing users to scroll through options without overwhelming them with all results at once.
* **Data Tables in Dashboards:** In enterprise applications, pagination helps break down large tables of data, such as sales figures or customer data, into manageable sections.
* **News Websites:** Paginating articles on news websites ensures readers can browse through content quickly and intuitively, without slowing down the page load.
