Pagination

Navegação numérica entre páginas de uma listagem. Composto por links, botões anterior/próximo e elipses.

Utilização

index.tsx
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@convertcompany/ui";

Exemplos

Sem elipses (poucas páginas)

Controlado (com React state)

A paginação é renderless por design — você controla isActive e os onClick em cada link.

index.tsx
const [page, setPage] = useState(1);
const totalPages = 10;

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious onClick={() => setPage((p) => Math.max(1, p - 1))} />
    </PaginationItem>
    {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
      <PaginationItem key={n}>
        <PaginationLink isActive={page === n} onClick={() => setPage(n)}>
          {n}
        </PaginationLink>
      </PaginationItem>
    ))}
    <PaginationItem>
      <PaginationNext onClick={() => setPage((p) => Math.min(totalPages, p + 1))} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Componentes

ComponenteDescrição
PaginationContainer <nav> raiz com role="navigation".
PaginationContentLista <ul> que envolve os itens.
PaginationItemWrapper <li> de cada item.
PaginationLinkLink de página. Aceita isActive para destacar a página atual.
PaginationPreviousBotão "Voltar" com chevron à esquerda.
PaginationNextBotão "Próximo" com chevron à direita.
PaginationEllipsisIndicador ... para páginas omitidas.
PropriedadeTipo
isActiveMarca o link como página atual (aplica variant outline + aria-current=page).
boolean
sizeTamanho do link. Default: icon-sm.
default
xs
sm
lg
icon
icon-sm
icon-xs
...propsDemais props nativas do elemento <a>.
AnchorHTMLAttributes<HTMLAnchorElement>