# `m-pagination`

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` |   |
| `value*` | The current value of the selected page. | `number` | `$bindable(1)` |
| `compact` | If `true`, display a compact version without the select. | `boolean` |   |
| `total` | Total number of pages. | `number` | `10` |
| `selectLabel` | Accessible label for the select of the pagination. | `string` | `Page selector` |
| `prefixlabel` | Word displayed before the current page number. | `string` | `Page` |
| `pagelabel` | Word displayed between the current page number and total page number. | `string` | `of` |

## Dependencies

### Depends on

- [m-button](../button/README.md)
- [m-icon-button](../iconbutton/README.md)

### Graph

```mermaid
graph TD;
  m-pagination --> m-button
  m-pagination --> m-icon-button
style m-pagination fill:#008240,stroke:#333,stroke-width:4px
```

