Pagination

Move between pages of a long list or table.

CSS only components/pagination.css

Numbers and compact

<nav class="dsgn-pagination" aria-label="Pagination example">
  <a class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" href="#pagination" aria-label="Previous page"><span class="dsgn-icon" aria-hidden="true">chevron_left</span></a>
  <a class="dsgn-button" data-variant="ghost" data-intent="neutral" href="#pagination">1</a><span class="dsgn-pagination-gap" aria-hidden="true">…</span>
  <a class="dsgn-button" data-variant="ghost" data-intent="neutral" href="#pagination" aria-current="page">5</a>
  <a class="dsgn-button" data-variant="ghost" data-intent="neutral" href="#pagination">6</a>
  <a class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" href="#pagination" aria-label="Next page"><span class="dsgn-icon" aria-hidden="true">chevron_right</span></a></nav>
<nav class="dsgn-pagination" aria-label="Pagination, compact example"><a class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" role="link" aria-disabled="true" aria-label="Previous page"><span class="dsgn-icon" aria-hidden="true">chevron_left</span></a><span class="dsgn-pagination-status">Page 1 of 12</span><a class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" href="#pagination" aria-label="Next page"><span class="dsgn-icon" aria-hidden="true">chevron_right</span></a></nav>

Usage

Built from ghost neutral Buttons: page numbers are square (min width = control height) and the current page is accent-subtle with accent text. Compact form: replace the numbers with

Disabled prev/next: drop the href and add role="link" aria-disabled="true" (an <a> without href has no role, so its aria-label would be ignored): <a class="dsgn-icon-button" … role="link" aria-disabled="true" aria-label="Previous page">.

Details

Classes: .dsgn-pagination .dsgn-button .dsgn-pagination-gap .dsgn-pagination-status
Tokens used: --dsgn-control-font-size --dsgn-control-height --dsgn-control-line-height --dsgn-control-pad-x --dsgn-control-pad-y --dsgn-control-subtle --dsgn-control-subtle-hover --dsgn-control-subtle-pressed --dsgn-control-text --dsgn-font-sans --dsgn-font-weight-semibold --dsgn-space-4 --dsgn-text-muted
In Figma: Pagination · Pagination item
Import alone: dsgn.systems/components/pagination.css