# Pagination

Navegação entre páginas de uma listagem.

A lista de números encolhe sozinha, então ela ocupa a mesma largura com dez ou
com dez mil páginas. No celular os números somem e ficam só as setas com "3 de
12": alvo de 32px erra o vizinho, e quase sempre se quer a proxima.

## No React Native

Não porta, por decisão - lista de celular rola; escolher o número da página é gesto de mesa. Não é fila: não vai existir. A [tabela de paridade](/react-native) diz o porquê de cada uma.

## Importação

```tsx
import { Pagination } from '@rivocode/ui'
```

## Exemplos

### Com reticência

```tsx
import { Pagination } from '@rivocode/ui'

export function WithEllipsis() {
  return <Pagination page={5} pageCount={12} onPageChange={() => {}} />
}
```

### Lista curta

```tsx
import { Pagination } from '@rivocode/ui'

export function ShortList() {
  return <Pagination page={1} pageCount={3} onPageChange={() => {}} />
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `onPageChange` | `(page: number) => void` | sim | 0.4.0 |  |
| `page` | `number` | sim | 0.4.0 | A pagina atual, contando de 1. |
| `pageCount` | `number` | sim | 0.4.0 | Quantas paginas existem. |
| `siblings` | `number` |  | 0.4.0 | Quantos numeros aparecem em volta da pagina atual. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Breadcrumb](/componentes/breadcrumb.md)
- [Command](/componentes/command.md)
- [Menu](/componentes/menu.md)
- [Menubar](/componentes/menubar.md)
- [NavigationMenu](/componentes/navigation-menu.md)
- [Sidebar](/componentes/sidebar.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)