Visão geral

O Pagination fornece navegação entre páginas com links anterior, próximo, numerados e elipse.

Demo

Básica

Com elipse

Import

import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"

Padrão de implementação

Snippets para paginação dinâmica.

Paginação dinâmica

function PaginationDemo({ page, totalPages }: { page: number; totalPages: number }) {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href={page > 1 ? `?page=${page - 1}` : "#"} />
        </PaginationItem>
        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
          <PaginationItem key={p}>
            <PaginationLink href={`?page=${p}`} isActive={p === page}>
              {p}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext href={page < totalPages ? `?page=${page + 1}` : "#"} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter