# MPagination

Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `id*` | A unique identifier for the pagination. | `string` | - |
| `modelValue*` | The current value of the selected page. | `number` | - |
| `compact` | If `true`, display a compact version without the select. | `boolean` | - |
| `options*` | Define the available choices for the pagination select element. | `{ id?: string` `undefined; text: string; value: number; }[]` | - |
| `selectLabel` | Accessible label for the select of the pagination. | `string` | - |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the pagination value changes, updating the modelValue prop. | [value: number] |

## Dependencies

### Depends on

- [MButton](../button)
- [MIconButton](../iconbutton)
- [MSelect](../select)

### Graph

```mermaid
graph TD;
  MPagination --> MButton
  MPagination --> MSelect
  MPagination --> MIconButton
style MPagination fill:#008240,stroke:#333,stroke-width:4px
```