Pagination

Componente de paginação totalmente acessível para navegar entre páginas de conteúdo.

Uso

Exemplos

Básico

Variante personalizada (Emphasis)

Poucas páginas

Muitas páginas

Estilo personalizado

Tamanhos diferentes

Não responsivo

API

Estrutura da Pagination

Componente	Descrição	Uso
Pagination	Componente principal que cuida da lógica e da renderização da paginação	Componente de alto nível com gerenciamento de estado embutido
PaginationRoot	Container raiz dos elementos de paginação	Envolve todos os componentes de paginação em implementações personalizadas
PaginationContent	Container dos números de página e dos botões de navegação	Agrupa os itens da paginação
PaginationInfo	Exibe informações sobre os itens ou a contagem total	Mostra informações de contexto como "Mostrando X itens" ou "X total"
PaginationItem	Wrapper de cada elemento da paginação	Container para números de página, reticências ou botões de navegação
PaginationLink	Botão clicável com o número da página	Elemento interativo para navegar entre páginas
PaginationPrevious	Botão de navegação para a página anterior	Vai para a página anterior
PaginationNext	Botão de navegação para a próxima página	Vai para a próxima página
PaginationEllipsis	Indicador de reticências para páginas ocultas	Aparece quando há páginas ocultas entre as visíveis

Pagination

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
currentPage	number	Qualquer inteiro positivo	-	Número da página ativa no momento.
totalPages	number	Qualquer inteiro positivo	-	Número total de páginas disponíveis.
maxVisibleItems	number	Qualquer inteiro positivo	2 (0 no mobile quando responsive)	Controla quantos números de página aparecem além da primeira e da última página. Em volta da página atual, são exibidas Math.floor(n / 2) páginas de cada lado (então 2 mostra 3 números entre as reticências). Perto do início ou do fim, são exibidas n + 1 páginas consecutivas. Quando totalPages é no máximo n + 2, todas as páginas são exibidas.
onPageChange	(page: number) => void	-	-	Função chamada quando uma página é selecionada.
itemsPerPage	number	Qualquer inteiro positivo	-	Número de itens exibidos por página (aparece no PaginationInfo).
totalItems	number	Qualquer inteiro positivo	-	Número total de itens somando todas as páginas (aparece no PaginationInfo).
responsive	boolean	true, false	true	Ativa o comportamento responsivo, que esconde as informações e ajusta os itens visíveis no mobile.
size	"sm" | "md" | "lg"	"sm", "md", "lg"	"md"	Tamanho de todos os botões da paginação.
variant	"regular" | "emphasis" | "error" | "warning" | "outlined" | "success"	"regular", "emphasis", "error", "warning", "outlined", "success"	"regular"	Variante visual aplicada ao botão da página ativa (os botões inativos usam a versão soft; com "outlined", os inativos usam "regular-basic").
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais para personalizar o estilo.

PaginationInfo

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
count	number	Qualquer inteiro positivo	-	Número a ser exibido.
label	string	Qualquer string	"itens"	Texto do label. Com "itens", mostra "Mostrando X itens". Caso contrário, mostra "X label".
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais para personalizar o estilo.

PaginationLink

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
isActive	boolean	true, false	false	Indica se esta é a página ativa no momento.
variant	"regular" | "regular-soft" | "regular-basic" | "emphasis" | "emphasis-soft" | "emphasis-basic" | "error" | "error-soft" | "error-basic" | "warning" | "warning-soft" | "warning-basic" | "success" | "success-soft" | "success-basic" | "outlined" | "gradient" | "medbrain"	-	"regular"	Variante visual base, com os mesmos valores do variant do Button. Quando ativo, usa a própria variante. Quando inativo e sem inactiveVariant, usa a versão suave da variante (-soft) quando ela existe, por exemplo "regular" vira "regular-soft". A exceção é "outlined", que fica "regular-basic" quando inativo. As demais variantes sem versão suave continuam iguais quando inativas; para mudar isso, passe inactiveVariant.
activeVariant	"regular" | "regular-soft" | "regular-basic" | "emphasis" | "emphasis-soft" | "emphasis-basic" | "error" | "error-soft" | "error-basic" | "warning" | "warning-soft" | "warning-basic" | "success" | "success-soft" | "success-basic" | "outlined" | "gradient" | "medbrain"	-	-	Variante personalizada para o estado ativo. Sobrescreve o comportamento padrão da variante quando isActive é true.
inactiveVariant	"regular" | "regular-soft" | "regular-basic" | "emphasis" | "emphasis-soft" | "emphasis-basic" | "error" | "error-soft" | "error-basic" | "warning" | "warning-soft" | "warning-basic" | "success" | "success-soft" | "success-basic" | "outlined" | "gradient" | "medbrain"	-	-	Variante personalizada para o estado inativo. Quando informada, substitui a versão suave da variant enquanto isActive é false.
size	"sm" | "md" | "lg"	"sm", "md", "lg"	"md"	Tamanho do botão com o número da página.
iconLeft	React.ReactNode	Qualquer nó React	-	Ícone exibido do lado esquerdo do botão.
iconRight	React.ReactNode	Qualquer nó React	-	Ícone exibido do lado direito do botão.
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais para personalizar o estilo.

PaginationPrevious / PaginationNext

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
size	"sm" | "md" | "lg"	"sm", "md", "lg"	"md"	Tamanho do botão de navegação.
variant	"regular" | "regular-soft" | "regular-basic" | "emphasis" | "emphasis-soft" | "emphasis-basic" | "error" | "error-soft" | "error-basic" | "warning" | "warning-soft" | "warning-basic" | "success" | "success-soft" | "success-basic" | "outlined" | "gradient" | "medbrain"	-	"regular-basic"	Variante visual do botão, com os mesmos valores do variant do Button.
iconLeft	React.ReactNode	Qualquer nó React	<ChevronLeftDuo /> / -	Ícone à esquerda do texto. O PaginationPrevious já usa ChevronLeftDuo, que pode ser substituído por esta prop.
iconRight	React.ReactNode	Qualquer nó React	- / <ChevronRightDuo />	Ícone à direita do texto. O PaginationNext já usa ChevronRightDuo, que pode ser substituído por esta prop.
disabled	boolean	true, false	false	Desabilita o botão quando não há página anterior/próxima.
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais para personalizar o estilo.
aria-label	string	Qualquer string	"Página anterior" / -	Nome acessível do botão. Pode ser sobrescrito. O PaginationNext não tem valor padrão, então o nome acessível dele é o texto visível ("Próximo").
children	React.ReactNode	Qualquer nó React	"Anterior" / "Próximo"	Label personalizado do botão.

PaginationEllipsis

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
size	"sm" | "md" | "lg"	"sm", "md", "lg"	"md"	Tamanho do container das reticências, para acompanhar o tamanho dos botões.
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais para personalizar o estilo.