---
title: "Paginação"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Paginação CSS Tailwind somente CSS. Páginas numeradas, setas anterior/seguinte, seleção de salto de página — sem JavaScript. WCAG acessível, funciona com Django, HTMX, Laravel, React."
url: https://frutjam.com/pt-br/components/pagination
---

# Paginação

Os componentes de paginação permitem que os usuários naveguem entre páginas de conteúdo – resultados de pesquisa, tabelas de dados, arquivos de artigos e listas de produtos. Construída compondo os componentes [Join](/components/join) e [Button](/components/button), a paginação Frutjam não requer JavaScript nem CSS extra. Suporta páginas numeradas, setas anterior/próxima, espaços de reticências, entradas de rádio acessíveis e seleção de salto de página.

Somente CSS, sem necessidade de JavaScript – crie paginação acessível com HTMX puro e CSS Tailwind. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React, Next.js e qualquer pilha.

| Aula         | Tipo        | Descrição                                          |
| ------------ | ----------- | -------------------------------------------------- |
| join         | Base        | Agrupa botões em uma faixa de paginação conectada  |
| join-item    | Modificador | Cada botão de página ou entrada dentro da junção   |
| btn-active   | State       | Destaca a página atual                             |
| btn-disabled | State       | Reticências não interativas ou página indisponível |

## Paginação Básica

Uma faixa de páginas numeradas com uma página ativa. Aplique **btn-active** para destacar a página atual. Use tags âncora em vez de botões para links de páginas renderizadas pelo servidor.

### Tamanhos

A paginação herda todos os tamanhos de botão. Use **btn-xs** ou **btn-sm** para tabelas compactas e **btn-lg** para interfaces touch-first.

### Com reticências

Use **btn-disabled** para o intervalo de reticências entre um grande intervalo de páginas. Os leitores de tela ignoram os botões desabilitados, então combine com `aria-hidden="true"` nas reticências.

## Navegação Anterior/Próxima

A paginação baseada em setas é o padrão mais comum para blogs, listas de produtos e qualquer feed paginado onde não é prático mostrar números exatos de páginas.

### Com ícones de seta

### Largura igual anterior/próxima

Use um wrapper **grid grid-cols-2** no contêiner de junção para dar largura igual a ambos os botões - ideal para layouts mobile-first e barras de paginação de largura total.

### Com primeiro/último

Adicione botões de seta dupla para permitir que os usuários pulem diretamente para a primeira ou última página. Útil para tabelas de dados com centenas de páginas.

## Paginação de Rádio Acessível

Use entradas `type="radio"` como itens de junção para seleção de páginas totalmente navegáveis ​​pelo teclado, somente CSS, sem JavaScript. Cada entrada atua como um botão pressionável enquanto mantém o estado selecionado no estado nativo.

## Paginação com salto de página

Combine junção, botões e seleção para obter uma barra de paginação compacta que permite aos usuários ir diretamente para qualquer página – comum em painéis de administração, interfaces CMS e aplicativos com muitos dados. Não é necessário JavaScript para a seleção em si; emparelhe com HTMX ou envie um formulário para navegação no lado do servidor.

## Estilo de contorno

Use **btn-outline** em todos os botões para obter um peso visual mais leve que se adapte às seções de conteúdo secundário e barras laterais.