Paginación

.pagination reparte un listado largo (blog, productos, resultados) en páginas. Va en un <nav> con aria-label, la lista en pagination__list y cada enlace con pagination__link. La página actual lleva aria-current="page".

Básica

En la primera página, «Anterior» queda deshabilitado: va sin href y con aria-disabled="true".

MóvilTabletEscritorioCompleto

HTML

<nav class="pagination" aria-label="Paginación">
  <ul class="pagination__list">
    <li><a class="pagination__link" aria-disabled="true">Anterior</a></li>
    <li><a class="pagination__link" href="#" aria-current="page">1</a></li>
    <li><a class="pagination__link" href="#">2</a></li>
    <li><a class="pagination__link" href="#">3</a></li>
    <li><a class="pagination__link" href="#">Siguiente</a></li>
  </ul>
</nav>

React

export default function PaginacionBasica() {
  return (
    <nav className="pagination" aria-label="Paginación">
      <ul className="pagination__list">
        <li><a className="pagination__link" aria-disabled="true">Anterior</a></li>
        <li><a className="pagination__link" href="#" aria-current="page">1</a></li>
        <li><a className="pagination__link" href="#">2</a></li>
        <li><a className="pagination__link" href="#">3</a></li>
        <li><a className="pagination__link" href="#">Siguiente</a></li>
      </ul>
    </nav>
  );
}

Muchas páginas

Muestra la primera, la última y las vecinas de la actual, y marca los saltos con pagination__ellipsis. «Anterior» y «Siguiente» pueden ser solo íconos: agrega pagination__link--icon y aria-label. Si no caben en una fila, los enlaces bajan a la siguiente; en móvil conviene dejar solo la página actual entre los saltos.

MóvilTabletEscritorioCompleto

HTML

<nav class="pagination" aria-label="Paginación">
  <ul class="pagination__list">
    <li>
      <a class="pagination__link pagination__link--icon" href="#" aria-label="Página anterior">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
      </a>
    </li>
    <li><a class="pagination__link" href="#">1</a></li>
    <li><span class="pagination__ellipsis">…</span></li>
    <li><a class="pagination__link" href="#">6</a></li>
    <li><a class="pagination__link" href="#" aria-current="page">7</a></li>
    <li><a class="pagination__link" href="#">8</a></li>
    <li><span class="pagination__ellipsis">…</span></li>
    <li><a class="pagination__link" href="#">20</a></li>
    <li>
      <a class="pagination__link pagination__link--icon" href="#" aria-label="Página siguiente">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
      </a>
    </li>
  </ul>
</nav>

React

export default function PaginacionElipsis() {
  return (
    <nav className="pagination" aria-label="Paginación">
      <ul className="pagination__list">
        <li>
          <a className="pagination__link pagination__link--icon" href="#" aria-label="Página anterior">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
          </a>
        </li>
        <li><a className="pagination__link" href="#">1</a></li>
        <li><span className="pagination__ellipsis">…</span></li>
        <li><a className="pagination__link" href="#">6</a></li>
        <li><a className="pagination__link" href="#" aria-current="page">7</a></li>
        <li><a className="pagination__link" href="#">8</a></li>
        <li><span className="pagination__ellipsis">…</span></li>
        <li><a className="pagination__link" href="#">20</a></li>
        <li>
          <a className="pagination__link pagination__link--icon" href="#" aria-label="Página siguiente">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
          </a>
        </li>
      </ul>
    </nav>
  );
}

Con botones

Si el contenido cambia sin cambiar de URL (una app en React o Vue), usa <button type="button">. El botón deshabilitado lleva disabled.

MóvilTabletEscritorioCompleto

HTML

<nav class="pagination" aria-label="Páginas de resultados">
  <ul class="pagination__list">
    <li><button class="pagination__link" type="button">Anterior</button></li>
    <li><button class="pagination__link" type="button">1</button></li>
    <li><button class="pagination__link" type="button" aria-current="page">2</button></li>
    <li><button class="pagination__link" type="button">3</button></li>
    <li><button class="pagination__link" type="button" disabled>Siguiente</button></li>
  </ul>
</nav>

React

export default function PaginacionBotones() {
  return (
    <nav className="pagination" aria-label="Páginas de resultados">
      <ul className="pagination__list">
        <li><button className="pagination__link" type="button">Anterior</button></li>
        <li><button className="pagination__link" type="button">1</button></li>
        <li><button className="pagination__link" type="button" aria-current="page">2</button></li>
        <li><button className="pagination__link" type="button">3</button></li>
        <li><button className="pagination__link" type="button" disabled>Siguiente</button></li>
      </ul>
    </nav>
  );
}

Tamaños

pagination--sm y pagination--lg cambian el alto de los enlaces (32, 40 y 48 px).

MóvilTabletEscritorioCompleto

HTML

<nav class="pagination pagination--sm" aria-label="Paginación pequeña">
  <ul class="pagination__list">
    <li><a class="pagination__link" href="#" aria-current="page">1</a></li>
    <li><a class="pagination__link" href="#">2</a></li>
    <li><a class="pagination__link" href="#">3</a></li>
  </ul>
</nav>
<nav class="pagination" aria-label="Paginación normal">
  <ul class="pagination__list">
    <li><a class="pagination__link" href="#" aria-current="page">1</a></li>
    <li><a class="pagination__link" href="#">2</a></li>
    <li><a class="pagination__link" href="#">3</a></li>
  </ul>
</nav>
<nav class="pagination pagination--lg" aria-label="Paginación grande">
  <ul class="pagination__list">
    <li><a class="pagination__link" href="#" aria-current="page">1</a></li>
    <li><a class="pagination__link" href="#">2</a></li>
    <li><a class="pagination__link" href="#">3</a></li>
  </ul>
</nav>

React

export default function PaginacionTamanos() {
  return (
    <>
      <nav className="pagination pagination--sm" aria-label="Paginación pequeña">
        <ul className="pagination__list">
          <li><a className="pagination__link" href="#" aria-current="page">1</a></li>
          <li><a className="pagination__link" href="#">2</a></li>
          <li><a className="pagination__link" href="#">3</a></li>
        </ul>
      </nav>
      <nav className="pagination" aria-label="Paginación normal">
        <ul className="pagination__list">
          <li><a className="pagination__link" href="#" aria-current="page">1</a></li>
          <li><a className="pagination__link" href="#">2</a></li>
          <li><a className="pagination__link" href="#">3</a></li>
        </ul>
      </nav>
      <nav className="pagination pagination--lg" aria-label="Paginación grande">
        <ul className="pagination__list">
          <li><a className="pagination__link" href="#" aria-current="page">1</a></li>
          <li><a className="pagination__link" href="#">2</a></li>
          <li><a className="pagination__link" href="#">3</a></li>
        </ul>
      </nav>
    </>
  );
}

Accesibilidad

• Usa <nav> con un aria-label («Paginación» o uno más preciso, como «Páginas del blog»).
• Marca la página actual con aria-current="page". is-active solo cambia el estilo: los lectores de pantalla no lo anuncian.
• Un enlace deshabilitado va sin href y con aria-disabled="true"; un botón, con disabled. is-disabled solo cambia el estilo.
• Si «Anterior» y «Siguiente» solo tienen ícono, ponles aria-label («Página anterior», «Página siguiente»). Los íconos llevan aria-hidden="true".
• Con botones, al cambiar de página actualiza aria-current y lleva el foco al inicio del listado.

Clases

Clase	Uso
pagination	Base, en el elemento <nav>.
pagination__list	Lista de enlaces (<ul>).
pagination__link	Enlace o botón. Actual: aria-current="page" o is-active. Deshabilitado: aria-disabled="true", disabled o is-disabled.
pagination__link--icon	Solo ícono, cuadrado. Requiere aria-label.
pagination__ellipsis	Puntos suspensivos entre saltos.
pagination--sm	Pequeña.
pagination--lg	Grande.

Variables

Para centrar la paginación, usa --ds-pagination-justify: center.

Variable	Valor por defecto	Uso
--ds-pagination-justify	flex-start	Alineación de los enlaces.
--ds-pagination-gap	0.375rem	Separación entre enlaces.
--ds-pagination-link-size	2.5rem	Alto y ancho mínimo del enlace.
--ds-pagination-link-padding-x	var(--ds-space-3)	Espacio horizontal interno del enlace.
--ds-pagination-link-gap	var(--ds-space-1)	Separación entre ícono y texto.
--ds-pagination-link-font-size	var(--ds-font-size-sm)
--ds-pagination-link-font-weight	var(--ds-font-weight-regular)
--ds-pagination-link-color	var(--ds-color-text)	Color del texto.
--ds-pagination-link-bg	var(--ds-color-surface)	Fondo del enlace.
--ds-pagination-link-border-color	var(--ds-color-border)	Color del borde.
--ds-pagination-link-radius	var(--ds-radius-md)	Radio de las esquinas.
--ds-pagination-link-hover-color	var(--ds-color-primary-contrast)	Texto en hover.
--ds-pagination-link-hover-bg	var(--ds-color-primary)	Fondo en hover.
--ds-pagination-link-hover-border-color	var(--ds-color-primary)	Borde en hover.
--ds-pagination-link-active-color	var(--ds-color-primary-contrast)	Texto de la página actual.
--ds-pagination-link-active-bg	var(--ds-color-primary)	Fondo de la página actual.
--ds-pagination-link-active-border-color	var(--ds-color-primary)	Borde de la página actual.
--ds-pagination-link-active-font-weight	var(--ds-font-weight-semibold)	Peso de la página actual.
--ds-pagination-icon-size	1.25em	Tamaño de los íconos.
--ds-pagination-ellipsis-color	var(--ds-color-text-muted)	Color de los puntos suspensivos.
--ds-pagination-focus-color	var(--ds-color-primary)	Color del contorno de foco.
--ds-pagination-disabled-opacity	0.5	Opacidad de un enlace deshabilitado.