# Paginación

> Navegación entre páginas de resultados.

Categoría: Navegación · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Paginación

```html
<div class="flex flex-wrap items-center gap-6 justify-between">
  <div class="flex items-center gap-1">
    <button aria-label="Página anterior" class="w-9 h-9 rounded-lg border border-ccs-line-strong text-ccs-slate hover:border-ccs-blue hover:text-ccs-blue grid place-items-center dark:text-ccs-dark-text-2 dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-accent dark:hover:border-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">
      <svg aria-hidden="true" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
    </button>
    <button class="w-9 h-9 rounded-lg bg-ccs-blue text-white font-medium dark:bg-ccs-blue-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">1</button>
    <button class="w-9 h-9 rounded-lg hover:bg-ccs-bg text-ccs-ink font-medium dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">2</button>
    <button class="w-9 h-9 rounded-lg hover:bg-ccs-bg text-ccs-ink font-medium dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">3</button>
    <span class="px-2 text-ccs-slate dark:text-ccs-dark-text-2">…</span>
    <button class="w-9 h-9 rounded-lg hover:bg-ccs-bg text-ccs-ink font-medium dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">12</button>
    <button aria-label="Página siguiente" class="w-9 h-9 rounded-lg border border-ccs-line-strong text-ccs-slate hover:border-ccs-blue hover:text-ccs-blue grid place-items-center dark:text-ccs-dark-text-2 dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-accent dark:hover:border-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">
      <svg aria-hidden="true" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    </button>
  </div>
  <div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Mostrando <span class="text-ccs-ink font-medium dark:text-ccs-dark-text">1–10</span> de 117 resultados</div>
</div>
```