pagination compact embedded utility pagination compact prev next small utility compact pagination small previous next pagination
Pagination Compact
Fetch pattern JSON:
curl https://webspire.de/patterns/pagination/compact.json compact.html
<div class="ws-pagination-compact flex items-center justify-between gap-4 rounded-2xl border border-[var(--ws-pagination-border)] bg-[var(--ws-pagination-bg)] px-4 py-3">
<p class="text-sm text-[var(--ws-pagination-text)]">Page <span class="font-semibold">3</span> of <span class="font-semibold">18</span></p>
<nav aria-label="Compact pagination" class="flex items-center gap-2">
<a href="#" aria-label="Previous page" class="inline-flex h-9 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)]">Prev</a>
<a href="#" aria-current="page" class="inline-flex h-9 min-w-9 items-center justify-center rounded-lg bg-[var(--ws-pagination-active-bg)] px-3 text-sm font-semibold text-[var(--ws-pagination-active-text)]">3</a>
<a href="#" aria-label="Next page" class="inline-flex h-9 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
paginationcompactembeddedutility
Slots
| Name | Required | Description |
|---|---|---|
| status | Yes | Short page-position label. |
| controls | Yes | Previous, current, and next controls. |
Compact pagination for smaller app surfaces. Keeps only the current page and directional controls, which is often enough for embedded tables and utility panels.