Pagination

Navigation through pages of results.

html

<nav class="pager pager--comfortable" style="--accent:#E8A020;" aria-label="Pagination">
  <a class="pager__nav" href="#" aria-label="Previous page">&#8249;</a>
  <a class="pager__num" href="#">1</a>
  <span class="pager__ellipsis" aria-hidden="true">&hellip;</span>
  <span class="pager__num pager__num--current" aria-current="page">3</span>
  <span class="pager__ellipsis" aria-hidden="true">&hellip;</span>
  <a class="pager__num" href="#">12</a>
  <a class="pager__nav" href="#" aria-label="Next page">&#8250;</a>
</nav>
<style>
.pager { display: flex; align-items: center; gap: 4px; font: 500 14px system-ui, sans-serif; color: #241430; }
.pager__nav, .pager__num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; text-decoration: none; color: #241430; }
.pager__nav:hover, .pager__num:hover, .pager__nav:focus-visible, .pager__num:focus-visible { background: #FAF7F2; outline: none; }
.pager__num--current { background: var(--accent); font-weight: 700; }
.pager__ellipsis { padding: 0 2px; opacity: .5; }
.pager--compact .pager__nav, .pager--compact .pager__num { min-width: 26px; height: 26px; font-size: 13px; }
</style>

tailwind

<nav aria-label="Pagination" class="pager-tw pager-tw--comfortable flex items-center gap-1 font-medium text-sm text-[#241430]" style="--accent:#E8A020;">
  <a class="inline-flex items-center justify-center min-w-[32px] h-8 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#" aria-label="Previous page">&#8249;</a>
  <a class="inline-flex items-center justify-center min-w-[32px] h-8 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">1</a>
  <span class="px-0.5 opacity-50" aria-hidden="true">&hellip;</span>
  <span class="inline-flex items-center justify-center min-w-[32px] h-8 rounded-lg font-bold" aria-current="page" style="background:#E8A020;">3</span>
  <span class="px-0.5 opacity-50" aria-hidden="true">&hellip;</span>
  <a class="inline-flex items-center justify-center min-w-[32px] h-8 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">12</a>
  <a class="inline-flex items-center justify-center min-w-[32px] h-8 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#" aria-label="Next page">&#8250;</a>
</nav>
<style>
.pager-tw a:focus-visible, .pager-tw span[aria-current]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pager-tw--compact a, .pager-tw--compact span { min-width: 26px; height: 26px; font-size: 13px; }
</style>

react

export function Pagination({
  current = 3,
  total = 12,
  accent = "#E8A020",
  showEllipsis = true,
  size = "comfortable",
}) {
  const compact = size === "compact";
  const cellStyle = { display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: compact ? 26 : 32, height: compact ? 26 : 32, borderRadius: 8, textDecoration: "none", color: "#241430", fontSize: compact ? 13 : 14 };
  return (
    <nav aria-label="Pagination" style={{ display: "flex", alignItems: "center", gap: 4, fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500, color: "#241430" }}>
      <a href="#" aria-label="Previous page" style={cellStyle}>&#8249;</a>
      <a href="#" style={cellStyle}>1</a>
      {showEllipsis && <span aria-hidden="true" style={{ padding: "0 2px", opacity: .5 }}>&hellip;</span>}
      <span aria-current="page" style={{ ...cellStyle, background: accent, fontWeight: 700 }}>{current}</span>
      {showEllipsis && <span aria-hidden="true" style={{ padding: "0 2px", opacity: .5 }}>&hellip;</span>}
      <a href="#" style={cellStyle}>{total}</a>
      <a href="#" aria-label="Next page" style={cellStyle}>&#8250;</a>
    </nav>
  );
}