Pagination

Navega entre páginas de uma lista longa, com resumo e botões Anterior e Próxima.

A Pagination divide uma lista longa em páginas numeradas: tentativas de Webhook, Pedidos importados, extrato de Créditos. Para carregar mais itens por rolagem, o Admin usa o botão "Carregar Mais" no rodapé do painel.

import { Pagination } from "@rastreio-x/ui";

Padrão

Cada botão fica em um Pagination.Item. Os botões usam onPress, não onClick.

Com resumo e reticências

Pagination.Summary conta o intervalo mostrado; Pagination.Ellipsis marca as páginas omitidas.

Só Anterior e Próxima

Quando o número da página não importa, deixe apenas as duas navegações.

Tamanhos

sm, md (padrão) e lg.

Desabilitada

Em carregamento ou lista de uma página, desabilite os botões em vez de escondê-los.

Anatomia

Pagination
├── Pagination.Content
├── Pagination.Ellipsis
├── Pagination.Item
├── Pagination.Link
├── Pagination.Next
├── Pagination.NextIcon
├── Pagination.Previous
├── Pagination.PreviousIcon
└── Pagination.Summary

Pagination.Summary: o resumo à esquerda.
Pagination.Content e Pagination.Item: o contêiner e o espaço de cada botão.
Pagination.Link: o número da página (isActive marca a atual).
Pagination.Previous e Pagination.Next, com PreviousIcon e NextIcon.
Pagination.Ellipsis: o indicador de páginas omitidas.

Propriedades

Pagination:

Pagination
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`size`	`'lg' \| 'md' \| 'sm'`	-	Tamanho do componente.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

Pagination.Link:

Pagination.Link
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`className`	`string`	`'react-aria-Button'`	Classes CSS aplicadas ao elemento.
`excludeFromTabOrder`	`boolean`	-	Tira o elemento da ordem do Tab. Evite, salvo quando há outro caminho pelo teclado.
`form`	`string`	-	Id do `<form>` ao qual o elemento está associado.
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>)`	-	URL ou função que processa o envio; sobrescreve a ação do formulário.
`formEncType`	`string`	-	Codificação dos dados enviados pelo formulário.
`formMethod`	`string`	-	Método HTTP do envio do formulário.
`formNoValidate`	`boolean`	-	Desativa a validação nativa do formulário no envio.
`formTarget`	`string`	-	Janela de destino do envio; sobrescreve a do formulário.
`id`	`string`	-	Identificador único do elemento.
`isActive`	`boolean`	-	Marca o item como ativo.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isPending`	`boolean`	-	Estado de carregamento: bloqueia novos cliques, mantém o foco e anuncia o estado a leitores de tela.
`name`	`string`	-	Nome do campo enviado com o formulário.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`preventFocusOnPress`	`boolean`	-	Impede que o foco vá para o elemento ao pressioná-lo. Pode prejudicar a acessibilidade.
`render`	`DOMRenderFunction<'button', ButtonRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<ButtonRenderProps>`	-	Estilos em linha aplicados ao elemento.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Tipo do elemento; define o comportamento nativo (em botões, `button`, `submit` ou `reset`).
`value`	`string`	-	Valor atual (controlado). Em campos de formulário, é o valor enviado.

Pagination.Previous:

Pagination.Previous
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`className`	`string`	`'react-aria-Button'`	Classes CSS aplicadas ao elemento.
`excludeFromTabOrder`	`boolean`	-	Tira o elemento da ordem do Tab. Evite, salvo quando há outro caminho pelo teclado.
`form`	`string`	-	Id do `<form>` ao qual o elemento está associado.
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>)`	-	URL ou função que processa o envio; sobrescreve a ação do formulário.
`formEncType`	`string`	-	Codificação dos dados enviados pelo formulário.
`formMethod`	`string`	-	Método HTTP do envio do formulário.
`formNoValidate`	`boolean`	-	Desativa a validação nativa do formulário no envio.
`formTarget`	`string`	-	Janela de destino do envio; sobrescreve a do formulário.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isPending`	`boolean`	-	Estado de carregamento: bloqueia novos cliques, mantém o foco e anuncia o estado a leitores de tela.
`name`	`string`	-	Nome do campo enviado com o formulário.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`preventFocusOnPress`	`boolean`	-	Impede que o foco vá para o elemento ao pressioná-lo. Pode prejudicar a acessibilidade.
`render`	`DOMRenderFunction<'button', ButtonRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<ButtonRenderProps>`	-	Estilos em linha aplicados ao elemento.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Tipo do elemento; define o comportamento nativo (em botões, `button`, `submit` ou `reset`).
`value`	`string`	-	Valor atual (controlado). Em campos de formulário, é o valor enviado.

Animações

CSS
indicativo

Só há transição de cor no hover e no foco dos botões, e o encolhimento ao pressionar. Trocar de página não anima. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms.

Acessibilidade

Renderiza um <nav> com aria-label="pagination"; passe um rótulo em português se houver mais de uma paginação na página.
A página atual leva aria-current="page"; as reticências são aria-hidden.
Teclado: Tab percorre os botões; Enter ou Espaço ativam.
Botões desabilitados são anunciados como indisponíveis.
Ao trocar de página, devolva o foco ao início da lista.

Boas práticas

Faça

Mostrar o resumo (“1 a 10 de 120 Pedidos”) e desabilitar Anterior na primeira página.

Evite

Esconder a paginação quando só há uma página sem aviso, ou mostrar cinquenta números.

Use reticências a partir de sete páginas.
Mantenha o tamanho da página estável entre visitas.
Para listas que crescem em tempo real, prefira "Carregar Mais".

Relacionados

DataGrid e Table, que costumam levar a paginação no rodapé.
Button para "Carregar Mais".