Pagination

Preview

<esa-pagination total-items="237"></esa-pagination>

<script>
  const p = document.querySelector('esa-pagination');
  p.pageSizeOptions = [10, 25, 50, 100];
  p.addEventListener('pagechange', (e) => console.log(e.detail));
</script>

Variants

Compact form — hide the page-size selector and the first/last jump buttons for tighter footers.

<esa-pagination
  total-items="80"
  page-size="20"
  show-page-size-selector="false"
  show-first-last-buttons="false"
></esa-pagination>

States

Disabled — all controls are dimmed and inert.

<esa-pagination total-items="100" disabled></esa-pagination>

API

Events

page-size-options is an array property — set it in JS, not as an attribute. The range label is derived as "start – end of total" ("0 of 0" when empty).

Accessibility

• Wraps controls in role="navigation" with aria-label="Pagination".
• Each control button has a descriptive aria-label (First / Previous / Next / Last page).
• The page-size selector is a native labeled <select>.
• Boundary buttons disable at the first/last page rather than wrapping.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.