Pular para o conteúdo
Faculdade PhorteDesign System

Pagination

Em andamento

Paginação de lista: anterior, os números das páginas (com reticências quando são muitas) e próxima. Com hrefDaPagina, cada página é um link com endereço (E71); sem, são botões que trocam no lugar. No celular, os números dão lugar a "Página X de Y".

Função
Navegação e estrutura
Também chamado de
paginação, páginas, anterior e próxima
Mora em
app/components/molecules/Pagination.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Muitas Paginas
  3. Interativo
  4. Com endereço

Quando usar

Embaixo de uma lista ou grade longa dividida em páginas — resultados de busca, catálogo de cursos, posts do blog.

Faça

  • Com mais de uma paginação na página, dê a cada uma um nome próprio: aria-label="Paginação dos resultados de busca" substitui o padrão "Paginação" (E143, Magoo).
  • Na troca no lugar (onPageChange), anuncie o trecho novo numa região viva ("Página 3 de 12") e deixe o foco no controle: a Pagination não sabe o que mudou na lista.
  • Use hrefDaPagina quando a lista tem endereço (o catálogo): a página 2 vira link indexável, compartilhável e que abre em nova aba (E71).
  • Para lista que troca no lugar, guarde a página no consumidor e passe currentPage; onPageChange recebe a escolhida.
  • Leve o foco (ou a rolagem) ao início da lista depois de trocar de página.
  • Dê um aria-label próprio quando houver duas paginações na tela.

Evite

  • Contar com os números no celular: abaixo de 768px, só anterior, próxima e o texto "Página X de Y" aparecem.

Quando não usar. Para passar itens de um carrossel, use o CarouselNavButton. Para alternar seções de uma página, o CourseTabs.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Anterior — "Página anterior"; indisponível na primeira.
  2. Números — Até sete, com `aria-label` "Página N de T"; o atual em vermelho.
  3. Reticências — Marcam os saltos quando há mais de sete páginas; decorativas.
  4. Texto compacto — "Página X de Y", só abaixo de 768px.
  5. Próxima — "Próxima página"; indisponível na última.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Página atualFundo --primary, texto branco e aria-current="page".
Outra páginaBorda e texto escuro; no hover, fundo --muted.
FocoO anel de foco, só no teclado.
Ponta, em botõesAnterior (na primeira) ou próxima (na última) a 50%, com aria-disabled="true": continua no Tab, o leitor diz "indisponível" e o clique não faz nada.
Ponta, em linksSem destino, fica só o desenho a 50%, fora do Tab e da árvore — conferido no teste da ficha.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Uma página sóNão renderiza nada (E71) — conferido no teste da ficha.
Página fora do intervaloFica presa nele: currentPage={40} de 5 vira a 5 (E71) — conferido no teste da ficha.
Até sete páginasTodas aparecem.
Mais de sete, perto do começo1 a 5, reticências e a última.
Mais de sete, no meioA primeira, reticências, a atual com as vizinhas, reticências e a última.
Tela abaixo de 768pxOs números e as reticências somem; aparece "Página X de Y".

Relacionados