## Pagination  
Display active page and navigate between multiple pages  
Category: Navigation  

### Introduction

### Siblings

Control the number of active item siblings with `siblings` prop.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Pagination(total=20, siblings=1, value=10),
        dmc.Pagination(total=20, siblings=2, value=10, my=15),
        dmc.Pagination(total=20, siblings=3, value=10),
    ]
)
```
### Boundaries

Control the number of items displayed after previous(<) and before next(>) buttons with `boundaries` prop.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Pagination(total=20, boundaries=1, value=10),
        dmc.Pagination(total=20, boundaries=2, value=10, my=15),
        dmc.Pagination(total=20, boundaries=3, value=10),
    ]
)
```
### Hide pages controls
Set `withPages=False` to hide pages controls:


```python
from dash import  html, Output, Input, callback
import dash_mantine_components as dmc


limit = 10
total = 145
total_pages = (total + limit - 1) // limit

component = dmc.Group(
    justify="flex-end",
    children=[
        dmc.Text(id="message-withPages", size="sm"),
        dmc.Pagination(id="pagination-withPages", total=total_pages, value=1, withPages=False),
    ],
)


@callback(
    Output("message-withPages", "children"),
    Input("pagination-withPages", "value"),
)
def update_message(page):
    start = limit * (page - 1) + 1
    end = min(total, limit * page)
    return f"Showing {start} – {end} of {total}"
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name    | Static selector             | Description                                               |
|:--------|:----------------------------|:----------------------------------------------------------|
| root    | .mantine-Pagination-root    | Root element                                              |
| control | .mantine-Pagination-control | Control element: items, next/previous, first/last buttons |
| dots    | .mantine-Pagination-dots    | Dots icon wrapper                                         |


### Keyword Arguments
#### Pagination

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether active item text color should depend on
    `background-color` of the indicator. If luminosity of the `color`
    prop is less than `theme.luminosityThreshold`, then `theme.white`
    will be used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- boundaries (number; optional):
    Number of elements visible on the left/right edges, `1` by
    default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors`, active item color, `theme.primaryColor` by
    default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Determines whether all controls should be disabled, `False` by
    default.

- gap (string | number; optional):
    Key of `theme.spacing`, gap between controls, `8` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hideWithOnePage (boolean; optional):
    Determines whether the pagination should be hidden when only one
    page is available (total=1), False by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem,
    `theme.defaultRadius` by default.

- siblings (number; optional):
    Number of siblings displayed on the left/right side of the
    selected page, `1` by default.

- size (number; optional):
    `height` and `min-width` of controls, `'md'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- total (number; required):
    Total number of pages, must be an integer.

- value (number; optional):
    Active page for controlled component, must be an integer in [0,
    total] interval.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withControls (boolean; optional):
    Determines whether next/previous controls should be rendered, True
    by default.

- withEdges (boolean; optional):
    Determines whether first/last controls should be rendered, False
    by default.

- withPages (boolean; optional):
    Determines whether pages controls should be displayed, `True` by
    default.