componentes / pagination

Pagination

Navega entre páginas de resultados; el padre guarda la página y obtiene los datos.

Cómo usar

Un componente controlado: pasa `page` (desde 1), `pageCount` y `onPageChange`. Con muchas páginas muestra la primera, la última, la actual y `siblingCount` vecinas con puntos suspensivos, manteniendo el mismo ancho. Todo texto integrado se puede cambiar (`previousLabel`, `nextLabel`, `pageLabel`, `aria-label`). Si cada página tiene su URL, prefiere enlaces reales.

preview

Pagination.tsx

import { Pagination } from "vaiperui";
 
const [page, setPage] = useState(1);
 
<Pagination
  page={page}
  pageCount={20}
  onPageChange={setPage}
  previousLabel="Página anterior"
  nextLabel="Página siguiente"
  pageLabel={(n) => `Página ${n}`}
/>

Colores

preview

primary

success

warning

danger

colores.tsx

<Pagination page={page} pageCount={20} onPageChange={setPage} variantColor="primary" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} variantColor="success" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} variantColor="warning" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} variantColor="danger" />

Tamaños

preview

tamanos.tsx

<Pagination page={page} pageCount={20} onPageChange={setPage} size="sm" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} size="md" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} size="lg" />

Radio

preview

none

full

radio.tsx

<Pagination page={page} pageCount={20} onPageChange={setPage} radius="none" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} radius="sm" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} radius="md" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} radius="lg" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} radius="full" />

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

<Pagination page={page} pageCount={20} onPageChange={setPage} customColor="#f97316" />
 
<Pagination page={page} pageCount={20} onPageChange={setPage} customColor="#8b5cf6" />

Vecinas

preview

siblingCount={2}

vecinas.tsx

<Pagination page={page} pageCount={30} siblingCount={2} onPageChange={setPage} />

Props

Prop	Valores	Predeterminado	Descripción
page	number	obligatorio	Página actual, desde 1
pageCount	number	obligatorio	Número total de páginas
onPageChange	(page: number) => void	obligatorio	Se llama con la página elegida
siblingCount	number	1	Páginas mostradas a cada lado de la actual
previousLabel	string	Previous page	Nombre accesible del botón anterior
nextLabel	string	Next page	Nombre accesible del botón siguiente
pageLabel	(page: number) => string	Page n	Nombre accesible de un botón de página
aria-label	string	Pagination	Nombre de la navegación
disabled	boolean	false	Deshabilita todos los botones
variantColor	primary \| success \| warning \| danger	primary	Color de acento del estado activo y del anillo de foco
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Tamaño del control y del texto
radius	none \| sm \| md \| lg \| full	md	Redondeo de las esquinas
animation	none \| smooth \| fast \| bounce	smooth	Transición entre estados

Accesibilidad

Renderiza un `<nav>` con `aria-label` (por defecto "Pagination") que contiene una lista (`<ul>`/`<li>`) de botones nativos.
El botón de la página actual tiene `aria-current="page"` y no hace nada al hacer clic.
Cada botón tiene un `aria-label` de `previousLabel`, `nextLabel` y `pageLabel(n)`; los iconos de flecha son `aria-hidden`.
Anterior se deshabilita en la primera página y siguiente en la última; `disabled` deshabilita todos los botones.
Los puntos suspensivos "…" son `aria-hidden` y no enfocables.

Teclado

Tecla	Acción
Tab / Shift+Tab	Recorre los botones habilitados en orden.
Enter / Space	Activa el botón enfocado (comportamiento nativo).

Ten en cuenta

Traduce `previousLabel`, `nextLabel`, `pageLabel` y `aria-label`; sus valores por defecto están en inglés.
Cambiar de página no mueve el foco ni anuncia nada; gestiónalo en `onPageChange` si hace falta.