Pagination

Page navigation with previous/next links and page numbers.

Component Skill — components/pagination/component-skill.md

Native basis

<nav> + links for page navigation.

Web Platform APIs

<nav> aria-current="page" :focus-visible prefers-reduced-motion prefers-contrast forced-colors

Classes

.pagination .pagination-list .pagination-link .pagination-prev .pagination-next .pagination-active .pagination-ellipsis

Default

Previous/next with chevron icons, page numbers, ellipsis, and an active page.

<nav class="pagination" aria-label="Pagination">
  <ul class="pagination-list">
    <li><a class="pagination-prev" href="#" aria-label="Go to previous page">
      <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="2">
        <path d="m15 18-6-6 6-6"/>
      </svg>
      Previous
    </a></li>
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link pagination-active" href="#"
            aria-current="page">2</a></li>
    <li><a class="pagination-link" href="#">3</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-next" href="#" aria-label="Go to next page">
      Next
      <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="2">
        <path d="m9 18 6-6-6-6"/>
      </svg>
    </a></li>
  </ul>
</nav>

Icons only

Compact pagination with just chevron arrows — useful alongside a "rows per page" selector.

<!-- Disabled previous (first page) -->
<a class="pagination-prev" href="#"
   aria-label="Go to previous page"
   aria-disabled="true">
  <svg aria-hidden="true" ...><path d="m15 18-6-6 6-6"/></svg>
</a>

<span>Page 1 of 10</span>

<a class="pagination-next" href="#"
   aria-label="Go to next page">
  <svg aria-hidden="true" ...><path d="m9 18 6-6-6-6"/></svg>
</a>

Simple

Page numbers only — no previous/next text labels.

<nav class="pagination" aria-label="Pagination">
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link pagination-active" href="#"
            aria-current="page">2</a></li>
    <li><a class="pagination-link" href="#">3</a></li>
    <li><a class="pagination-link" href="#">4</a></li>
    <li><a class="pagination-link" href="#">5</a></li>
  </ul>
</nav>

Disabled at boundaries

Previous is disabled on the first page; next is disabled on the last page.

<!-- First page: previous disabled -->
<a class="pagination-prev" href="#"
   aria-label="Go to previous page"
   aria-disabled="true">…</a>

<!-- Last page: next disabled -->
<a class="pagination-next" href="#"
   aria-label="Go to next page"
   aria-disabled="true">…</a>

CSS view file

Styles for the pagination component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .pagination { display: flex; justify-content: center; }
  .pagination-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .pagination-link, .pagination-prev, .pagination-next {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem;
    border: 1px solid transparent; border-radius: var(--radius-md);
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    cursor: pointer; outline: none;
    transition: background-color 150ms ease, border-color 150ms ease; gap: 0.25rem;
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    /* Disabled state for prev/next at boundaries */
    &[aria-disabled="true"], &.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  .pagination-prev, .pagination-next { padding-inline: 0.75rem; gap: 0.375rem; }
  .pagination-active { border-color: var(--border); background-color: var(--background); font-weight: 500; }
  .pagination-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .pagination-link, .pagination-prev, .pagination-next { transition: none; }
  }

  @media (prefers-contrast: more) {
    .pagination-link, .pagination-prev, .pagination-next {
      border-color: var(--border);
      &:hover { border-color: var(--foreground); }
    }
    .pagination-active { border-width: 2px; }
  }

  @media (forced-colors: active) {
    .pagination-active {
      border-color: Highlight;
    }
    .pagination-link, .pagination-prev, .pagination-next {
      &:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    }
  }
}