Skip to content
aidsgnaidsgnaidsgn

Pagination

Use Pagination to move through a known collection of result pages. Large ranges stay compact automatically.

<aidsgn-pagination label="Search results pages" current-page="5" total-pages="12">
<nav class="aidsgn-pagination__nav" aria-label="Search results pages"><ul class="aidsgn-pagination__list">
  <li class="aidsgn-pagination__control"><button class="aidsgn-pagination__button aidsgn-pagination__button--previous" type="button" aria-label="Previous page"><aidsgn-icon class="aidsgn-pagination__icon" name="chevron-left" aria-hidden="true"><svg class="aidsgn-icon__svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" focusable="false" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></aidsgn-icon></button></li>
  <li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">1</button></li><li class="aidsgn-pagination__ellipsis" data-aidsgn-ellipsis="ellipsis-start" aria-hidden="true">…</li>
  <li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">2</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">3</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">4</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page aidsgn-is-current" type="button" aria-current="page">5</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">6</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">7</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">8</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">9</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">10</button></li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">11</button></li>
  <li class="aidsgn-pagination__ellipsis" data-aidsgn-ellipsis="ellipsis-end" aria-hidden="true">…</li><li class="aidsgn-pagination__item"><button class="aidsgn-pagination__button aidsgn-pagination__button--page" type="button">12</button></li>
  <li class="aidsgn-pagination__status-item"><output class="aidsgn-pagination__status" aria-live="polite">Page 5 of 12</output></li><li class="aidsgn-pagination__control"><button class="aidsgn-pagination__button aidsgn-pagination__button--next" type="button" aria-label="Next page"><aidsgn-icon class="aidsgn-pagination__icon" name="chevron-right" aria-hidden="true"><svg class="aidsgn-icon__svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" focusable="false" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></aidsgn-icon></button></li>
</ul></nav>
</aidsgn-pagination>

Listen for aidsgn-page-change to load the selected page. The event detail contains the new one-based page. Set previous-label and next-label when the interface language needs different button names.

Holding any enabled page or direction button applies shared Press feedback without changing its 44px target. Reduced motion suppresses the scale.

Usage guidelines

Section titled “Usage guidelines”
Search results page 5 of 12 uses Pagination with durable numbered boundaries.Search results page 5 of 12 uses Pagination with durable numbered boundaries.
Do

Paginate stable collections

Use Pagination when an ordered collection has durable boundaries between discrete pages.

Two Pagination controls are visibly associated with Orders pages and Activity pages.Two Pagination controls are visibly associated with Orders pages and Activity pages.
Do

Name each paginated region

Give the control a specific accessible label when a page contains more than one paginated collection.

A short six-item message list is split across three pages, interrupting a simple reading flow.A short six-item message list is split across three pages, interrupting a simple reading flow.
Don’t

Avoid unnecessary page boundaries

Prefer a simple “load more” flow when it better preserves someone’s position and comparison context.

Pagination highlights page 3 while the heading and URL annotation still indicate page 2.Pagination highlights page 3 while the heading and URL annotation still indicate page 2.
Don’t

Never update the control alone

Keep the collection, URL, and announced state synchronized whenever the selected page changes.