pagination · Casa Hacker DS

overview

01

mostrando 1-10 de 247

página 1 de 25

variantes

02

Variante única.

estados

03

10 / 100

página 1

50 / 100

página 5

100 / 100

página 10

modifiers · api

04

prop	tipo	default	descrição
.pagination	class	—	container
.pagination-items	class	—	grupo de controles
button[disabled]	attr	—	estado boundary

quando usar

05

use

Listas com 50+ itens
Tabelas paginadas no servidor
Quando paginação é mais clara que scroll infinito

não use

Listas com <30 itens — mostra tudo
Conteúdo de feed (rede social) — usa scroll infinito
Esconder o total — usuário precisa saber onde está

acessibilidade

06 · wcag aa

<nav aria-label="pagination">
aria-current="page" no número da página atual
Boundary buttons disabled (não só visualmente)
Foco visível em todos os controles

código

07 · html

<nav class="pagination" aria-label="pagination">
  <div>1-10 de 247</div>
  <div class="pagination-items">
    <button>← anterior</button>
    <span>página 5 de 25</span>
    <button>próximo →</button>
  </div>
</nav>