Pagination

Recipe CSS

This is the exact CSS your kit ships for Pagination — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Pagination & breadcrumb === */
.pagination { display: inline-flex; gap: var(--k-s-4); }
/* Pagination buttons — same count-chip formula as .badge--count.
 * Em-based so chip scales with --k-type-small. 2.25em on 12-13px font
 * lands ~27-29px (current visual target). Multi-digit ("10", "99")
 * auto-pills via min-width + padding-inline, keeping height constant. */
.pagination button {
  height: 2.25em;
  min-width: 2.25em;
  padding-inline: 0.63em;
  padding-block: 0;
  border-radius: 999px;
  border: 1px solid var(--k-border);
  background: var(--k-surface);
  font-size: var(--k-type-small);
  font-weight: var(--k-ui-weight, 500);
  line-height: 1;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  /* center single-child content (digits or chevrons) — without this an SVG
     icon falls back to vertical-align: baseline and drifts off-center. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination button:hover:not(:disabled):not([aria-current='true']) { background: var(--k-state-hover); border-color: var(--k-fg-faint); }
.pagination button:active:not(:disabled):not([aria-current='true']) { background: var(--k-state-press); }
.pagination button[aria-current='true'] { background: var(--k-primary); color: var(--k-primary-fg); border-color: var(--k-primary); }
/* Prev/next at the ends are disabled — a real pager never lets you page past
   the first/last. Greys out + blocks the click instead of silently no-op'ing. */
.pagination button:disabled { opacity: var(--k-disabled-opacity, 0.5); cursor: not-allowed; pointer-events: none; }
.pagination__ellipsis {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 2.25em;
  color: var(--k-fg-faint);
  font-size: var(--k-type-small);
}
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-4);
  font-size: var(--k-type-small);
  color: var(--k-fg-muted);
  /* Semantic list reset — use an <ol> with <li> crumbs (SR announces "list, N
   * items"); display:contents keeps the li layout-neutral so the flex row + gap
   * still apply to the <a>/<svg> directly. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: contents; }
.breadcrumb a { color: var(--k-fg); }
.breadcrumb svg { color: var(--k-fg-faint); }
/* The current page (last crumb, aria-current="page") reads as the anchor, not a link. */
.breadcrumb [aria-current="page"] { color: var(--k-fg); font-weight: var(--k-weight-medium); }