# Pagination

A component to navigate through paginated content.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { Box, Main, Pagination } from '@aragon/ui'

function App() {
  const [selected, setSelected] = useState(0)
  return (
    <Main>
      <Box>
        <Pagination pages={20} selected={selected} onChange={setSelected} />
      </Box>
    </Main>
  )
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-b7b90ffaeda854e183337f351e1005a5212dbe20%2FSchermata%202022-06-25%20alle%2022.21.22.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `onChange` <a href="#onchange" id="onchange"></a>

| TYPE                              | DEFAULT VALUE |
| --------------------------------- | ------------- |
| `Function`: `(item: Number) -> *` | None          |

Gets called when the selected page changes. Takes the new index as a unique parameter.

#### `pages` <a href="#pages" id="pages"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `Number` | `0`           |

The total amount of pages.

#### `selected` <a href="#selected" id="selected"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `Number` | `0`           |

The currently selected page (zero based numbering).

#### `touchMode` <a href="#touchmode" id="touchmode"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | `false`       |

When `true`, adapts the component to touch screens by making the targets bigge