Pagination
Partes de paginação montadas sobre o Button. A página atual usa o tom suave de ação e é anunciada com aria-current.
Lista de envelopes
Cinco envelopes por página, com reticências quando há muitas páginas. getPaginationRange calcula a sequência.
- Aditivo contratualENV-2026-1016Em assinatura
- Termo de confidencialidadeENV-2026-1017Enviado
- Proposta comercialENV-2026-1018Rascunho
- Distrato de locaçãoENV-2026-1019Expirado
- Contrato de prestação de serviçosENV-2026-1020Concluído
16–20 de 87 envelopes
Poucas páginas
Até sete páginas, todas aparecem.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| PaginationLink.isActive | boolean | false | Marca a página atual com aria-current="page". |
| PaginationLink.asChild | boolean | false | Renderiza um link próprio, como o do roteador do app. |
| size | "sm" | "md" | "lg" | "sm" | Altura h-form-* repassada ao Button. |
| PaginationPrevious / PaginationNext | ButtonProps | — | Textos "Anterior" e "Próxima"; aria-label em português. |
| PaginationFirst / PaginationLast | ButtonProps | — | Botões de ícone para a primeira e a última página. |
| getPaginationRange(page, total) | (number | "ellipsis")[] | — | Primeira, última e vizinhas da atual, com reticências entre os saltos. |
<Pagination>
<PaginationContent>
<PaginationItem><PaginationPrevious onClick={prev} /></PaginationItem>
<PaginationItem><PaginationLink isActive>1</PaginationLink></PaginationItem>
<PaginationItem><PaginationNext onClick={next} /></PaginationItem>
</PaginationContent>
</Pagination>