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

Family

pagination

Tier

enhanced

Kind

component

Extends

pagination/base

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.