Skip to content
Praesepe UI

navigation

Pagination

Numbered pagination with ellipsis windowing and a simple Previous/Next variant with result range summary.

Copied!

Examples

Numbered

Copied! 
<x-ui.pagination
    variant="numbered"
    :current="3"
    :total="5"
    :per-page="10"
    :total-items="42"
/>

<nav class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between" aria-label="Pagination">
    <p class="text-sm text-fg-muted">Showing <span class="font-medium tabular-nums text-fg">21</span> to <span class="font-medium tabular-nums text-fg">30</span> of <span class="font-medium tabular-nums text-fg">42</span> invoices</p>
    <ul class="flex items-center gap-1">
        <li><a href="?page=2" class="inline-flex size-9 items-center justify-center rounded-control border border-border bg-surface-raised text-sm tabular-nums shadow-2xs transition-colors duration-150 hover:border-border-strong hover:bg-surface-sunken" aria-label="Previous page">‹</a></li>
        <li><a href="?page=1" class="inline-flex size-9 items-center justify-center rounded-control border border-border bg-surface-raised text-sm tabular-nums shadow-2xs">1</a></li>
        <li><span class="inline-flex size-9 items-center justify-center text-sm tabular-nums text-fg-subtle" aria-hidden="true">…</span></li>
        <li><a href="?page=2" class="inline-flex size-9 items-center justify-center rounded-control border border-border bg-surface-raised text-sm tabular-nums shadow-2xs">2</a></li>
        <li><a href="?page=3" class="inline-flex size-9 items-center justify-center rounded-control bg-brand text-sm tabular-nums text-on-brand shadow-[inset_0_1px_0_0_rgba(255,255,255,0.16),0_1px_2px_0_rgba(0,0,0,0.06)]" aria-current="page">3</a></li>
        <li><a href="?page=4" class="inline-flex size-9 items-center justify-center rounded-control border border-border bg-surface-raised text-sm tabular-nums shadow-2xs">4</a></li>
        <li><span class="inline-flex size-9 items-center justify-center text-sm tabular-nums text-fg-subtle" aria-hidden="true">…</span></li>
        <li><a href="?page=5" class="inline-flex size-9 items-center justify-center rounded-control border border-border bg-surface-raised text-sm tabular-nums shadow-2xs">5</a></li>
        <li><a href="?page=4" class="inline-flex size-9 items-center justify-center rounded-control border border-border bg-surface-raised text-sm tabular-nums shadow-2xs transition-colors duration-150 hover:border-border-strong hover:bg-surface-sunken" aria-label="Next page">›</a></li>
    </ul>
</nav>

Simple

Copied! 
<x-ui.pagination
    variant="simple"
    :current="1"
    :total="5"
    :per-page="10"
    :total-items="42"
/>

<nav class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between" aria-label="Pagination">
    <p class="text-sm text-fg-muted">Showing <span class="font-medium tabular-nums text-fg">1</span> to <span class="font-medium tabular-nums text-fg">10</span> of <span class="font-medium tabular-nums text-fg">42</span> invoices</p>
    <div class="flex items-center gap-2">
        <a href="?page=1" class="inline-flex h-9 items-center rounded-control border border-border bg-surface-raised px-3.5 text-sm shadow-2xs opacity-50" aria-disabled="true" tabindex="-1">Previous</a>
        <a href="?page=2" class="inline-flex h-9 items-center rounded-control border border-border bg-surface-raised px-3.5 text-sm text-fg shadow-2xs transition-colors duration-150 hover:border-border-strong hover:bg-surface-sunken">Next</a>
    </div>
</nav>

Props API

Component props
Prop Description
variant
Type numbered|simple
Default numbered
Page button list or compact previous/next controls.
current
Type int
Default 1
Active page number.
total
Type int
Default 1
Total number of pages.
perPage
Type int
Default 10
Items per page used for the range summary.
totalItems
Type int|null
Default null
Total item count. Defaults to total * perPage when omitted.

Accessibility notes

Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.

  • Wraps controls in nav with aria-label="Pagination".
  • The active page link sets aria-current="page".
  • Disabled previous/next links use aria-disabled="true" and tabindex="-1".
  • Ellipsis markers are aria-hidden decorative separators.

Built by Praesepe

Architecture & custom software partner

Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.

  • Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
  • Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
  • Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA

Talk to the studio

Chat on WhatsApp Email the studio Visit Praesepe