# Pagination
## Overview
## Usage
### When to use this component?
Use the Pagination component in interfaces where content is divided across multiple pages and users need to navigate through it sequentially. It’s ideal for content feeds, search results, product listings, and any scenario where users browse content across pages.
### How it works
The Pagination component provides navigation options, typically displaying the current page, total pages, and navigation buttons like "Previous" and "Next." Users can click these buttons to move between pages. The component can be customized to show additional navigation controls, depending on the application’s requirements.
### Code
{% tabs %}
{% tab title="Vanilla Js" %}
```jsx
```
{% endtab %}
{% tab title="React" %}
```jsx
```
{% endtab %}
{% tab title="Vue" %}
```jsx
```
{% endtab %}
{% tab title="Angular" %}
```jsx
```
{% endtab %}
{% endtabs %}
### Properties
| Property | Description | Type |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `component_mode` | An optional property that can be used to specify a mode for the pagination component, which may affect its behavior or styling depending on the use case. | `string` |
| `current_page` | The currently active page in the pagination. This defines the page that will be highlighted or considered as the "current" page. | `number` |
| `custom_class` | Custom CSS class(es) that can be applied to the pagination component for additional styling or customization. | `string` |
| `total_pages` | The total number of pages available for pagination. This determines how many pages are displayed in the pagination control. | `number` |
| `type` |
The pagination style to be used. Different values adjust the layout and behavior of the pagination control.
'simple-slider': Displays a simple slider with previous and next buttons.
'buttons': Displays previous, next, and page buttons.
'text': Displays page numbers in a text format with previous and next buttons.
'text-pages': Displays page buttons with previous and next buttons in a text format.
'button-text': Displays previous and next buttons along with page buttons, in a button-text format.
'buttons-pages': Displays only the previous and next buttons.
'full': Displays all page buttons without previous/next buttons.
| `"button-text" \| "buttons" \| "buttons-pages" \| "full" \| "simple-slider" \| "text" \| "text-pages"` |
| `simple_slider_prev_button` | Name attribute for the button with the `type` of `simple_slider` | `string` |
| `simple_slider_next_button` | Name attribute for the button with the `type` of `simple_slider` | `string` |
| `buttons_prev_button` | Name attribute for the button with the `type`of `buttons` | `string` |
| `buttons_next_button` | Name attribute for the button with the `type` of `buttons` | `string` |
| `text_prev_button` | Name attribute for the button with the `type` of `text` | `string` |
| `text_next_button` | Name attribute for the button with the `type` of `text` | `string` |
| `text_pages_prev_button` | Name attribute for the button with the `type` of `text_pages` | `string` |
| `text_pages_next_button` | Name attribute for the button with the `type` of `text_pages` | `string` |
| `button_text_prev_button` | Name attribute for the button with the `type` of `buttons_text` | `string` |
| `button_text_next_button` | Name attribute for the button with the `type` of `buttons_text` | `string` |
| `buttons_pages_prev_button` | Name attribute for the button with the `type` of `button_pages` | `string` |
| `buttons_pages_next_button` | Name attribute for the button with the `type` of `button_pages` | `string` |
| paginateClick | Event Listener to capture click on pagination with pagenumber: number as parameter | Event Listener |
## Anatomy
### Anatomy Options
**Label**: Displays the range of results currently being viewed and the total number of results available (e.g., "Showing 1 to 10 of 97 results"). This informs the user about the scope of displayed data.
**Previous Icon**: An arrow icon pointing left, used to navigate to the previous page of results. It is typically disabled on the first page.
**Pagination Base**: Includes all the clickable page numbers and possibly icons or ellipses indicating more pages. This area allows users to jump to specific pages directly.
**Selected Pagination Base**: Highlights the current page number within the pagination base, usually styled differently (e.g., a different color or bold) to indicate it is the active page.
**Next Icon**: An arrow icon pointing right, used to navigate to the next page of results. It becomes disabled when the user is on the last page.
**Quick Select Button**: A dropdown menu allowing the user to quickly select how many results to display per page (e.g., "10/page"). This provides control over the volume of data shown at one time.
**Text Field**: Accompanied by a "Go to Page" button, this field allows users to enter a page number and navigate directly to that page. It provides a faster way to jump to a specific page, especially useful in large datasets.
## Dos and Don'ts
| Dos | Don'ts |
| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Use the Pagination component when you need to divide large amounts of content across multiple pages. | Avoid using pagination if content can be displayed on a single page without impacting performance or UX. |
| Ensure clear labeling for each button to make navigation intuitive. | Do not clutter the pagination controls with excessive styling; keep it simple and focused on navigation. |
| Provide a clear visual indication of the current page to help users understand their position. | Avoid using pagination if a continuous scroll would enhance user experience in a particular context. |
| Test the Pagination component for keyboard accessibility to ensure it is fully navigable. | Don't hide important information in pagination if users need easy access to all items within the dataset. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://designsystem.dubai.ae/components/pagination.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.