Paginación

Navega listas de resultados. Variantes classic (anterior/siguiente) y numeric (chevrons + páginas con elíptica).

Preview principal

PAGINATION1–10 / 467

página 1 · 47 totales · variant=numeric

Classic

Anterior / siguiente + showResults opcional.

Mostrando 1 a 10 de 467 resultados

Numeric

Default. Chevrons + números con elíptica si totalPages > 7.

Deshabilitado

disabled bloquea toda la navegación.

Uso

import { useState } from "react";
import { Pagination } from "devsoftec-ui";

function Ejemplo() {
  const [page, setPage] = useState(1);

  return (
    <Pagination
      page={page}
      totalPages={47}
      onChange={setPage}
      variant="numeric"
    />
  );
}

Controlado: page + onChange. Los extremos se deshabilitan solos.

Props

Prop	Tipo	Default	Descripción
`page`	`number`	`1`	Página activa
`totalPages`	`number`	`1`	Total de páginas
`onChange`	`(page: number) => void`	—	Al cambiar
`variant`	`classic` \| `numeric` \| `spread`	`numeric`	Estilo
`align`	`left` \| `center` \| `right`	`center`	Alineación (`numeric`)
`showResults`	`{ from, to, total }`	—	Recuento (útil en `classic`)
`prevLabel` / `nextLabel`	`string`	i18n	Etiquetas de extremos
`disabled`	`boolean`	—	Bloquea toda la interacción

Variantes

Variante	Descripción
`classic`	Solo anterior / siguiente (+ `showResults`)
`numeric`	Chevrons + números (default)
`spread`	Igual que `numeric`, con texto Anterior/Siguiente (poco usado)

Comportamiento

Elíptica automática si totalPages > 7
Página activa con fondo de marca (aria-current="page")
Extremos deshabilitados en primer / último
disabled apaga todos los botones
Etiquetas vía i18n (pagination.*)