Pagination With Info

Fetch pattern JSON: curl https://webspire.de/patterns/pagination/with-info.json

with-info.html

<div class="ws-pagination space-y-4">
  <p class="text-sm text-[var(--ws-pagination-text)]">Showing <span class="font-medium">21</span> to <span class="font-medium">30</span> of <span class="font-medium">97</span> results</p>
  <nav aria-label="Pagination" class="flex items-center justify-center gap-1">
    <a href="#" aria-label="Previous page" class="inline-flex h-10 items-center justify-center rounded-lg border border-[var(--ws-pagination-border)] px-3 text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">Previous</a>
    <a href="#" aria-label="Page 1" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">1</a>
    <a href="#" aria-label="Page 2" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">2</a>
    <a href="#" aria-current="page" aria-label="Page 3, current page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-pagination-active-bg)] text-sm font-medium text-[var(--ws-pagination-active-text)]">3</a>
    <a href="#" aria-label="Page 4" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">4</a>
    <a href="#" aria-label="Page 5" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">5</a>
    <span class="inline-flex h-10 w-10 items-center justify-center text-sm text-[var(--ws-pagination-text)]">&hellip;</span>
    <a href="#" aria-label="Page 10" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">10</a>
    <a href="#" aria-label="Next page" class="inline-flex h-10 items-center justify-center rounded-lg border border-[var(--ws-pagination-border)] px-3 text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">Next</a>
  </nav>
</div>

Details

Family

pagination

Tier

enhanced

Kind

component

Extends

pagination/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

paginationresultsinfosummaryrange

Slots

Name	Required	Description
info	Yes	Results summary text showing current range and total.
pages	Yes	Page number links with current page indicator.
previous	Yes	Previous page navigation button.
next	Yes	Next page navigation button.

Numbered pagination extended with a “Showing X to Y of Z results” summary above. Ideal for data-heavy interfaces like admin tables and search results.