pagination results info summary range pagination results showing range count info pagination with results count page navigation showing item range
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)]">…</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
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.