Components / Layout & Navigation / Pagination

Pagination beta

Page numbers with a clear current page: ink-filled, everything else quiet.

Preview

<div style="display:grid;gap:16px">
  <nav class="k-pagination" aria-label="Pagination">
    <a class="k-page" href="#" aria-label="Previous page"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m15 6-6 6 6 6"/></svg></a>
    <a class="k-page" href="#">1</a><a class="k-page" href="#" aria-current="page">2</a><a class="k-page" href="#">3</a><a class="k-page" href="#">4</a><span class="k-page dots">…</span><a class="k-page" href="#">18</a>
    <a class="k-page" href="#" aria-label="Next page"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m9 6 6 6-6 6"/></svg></a>
  </nav>
  <nav class="k-pagination" aria-label="Pagination compact">
    <a class="k-page" href="#">← Prev</a><span style="font-size:12.5px;color:var(--k-ink-2);padding:0 6px">Page 3 of 12</span><a class="k-page" href="#">Next →</a>
  </nav>
</div>

/* KATA Pagination */
.k-pagination{display:flex;align-items:center;gap:4px}
.k-page{min-width:32px;height:32px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-radius);font-size:13px;color:var(--k-ink-2);text-decoration:none;font-family:var(--k-font);transition:background .13s}
a.k-page:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-page[aria-current="page"]{background:var(--k-ink);color:var(--k-on-color);font-weight:550}
.k-page.dots{color:var(--k-ink-3);pointer-events:none}
.k-page.disabled{opacity:.4;pointer-events:none}

Usage

For lists longer than a screen. Show the current page and its neighbours; collapse the rest into an ellipsis. On mobile, the compact form (prev / next + position) is enough.

Accessibility

A <nav> with aria-label="Pagination"; the current page carries aria-current="page"; prev/next say where they go, not just show arrows.

Breadcrumbs

Separator