Pagination

Navegación entre páginas de un listado.

---

Import

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from '@imansi/ui';

---

Uso básico

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=3">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

---

Con estado

import { useState } from 'react';

export function ListaPaginada() {
  const [pagina, setPagina] = useState(1);
  const total = 10;

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            onClick={() => setPagina(p => Math.max(1, p - 1))}
            disabled={pagina === 1}
          />
        </PaginationItem>
        {Array.from({ length: total }, (_, i) => i + 1).map((n) => (
          <PaginationItem key={n}>
            <PaginationLink
              isActive={n === pagina}
              onClick={() => setPagina(n)}
            >
              {n}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext
            onClick={() => setPagina(p => Math.min(total, p + 1))}
            disabled={pagina === total}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

---

Props

PaginationLink

Prop	Tipo	Default	Descripción
isActive	boolean	false	Marca la página actual
size	'default' | 'icon'	'icon'	Tamaño

PaginationPrevious y PaginationNext incluyen los íconos automáticamente.

---

Accesibilidad

• role="navigation" con aria-label="pagination"
• aria-current="page" en el link activo
• Textos accesibles en los botones de anterior/siguiente