Featured
PaginationNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 frameworksIntermediate
Loading…
Two links driven by opaque next/previous cursors, hidden when an end is reached.
<!--
Cursor pagination has no page numbers to render - the server hands back an
opaque token for the next and previous slice, and a null token is the only
signal that an end has been reached. So the control is exactly two links, each
present only when its cursor exists.
-->
<nav aria-label="Pagination" class="flex items-center justify-between gap-3">
<a href="?before=eyJpZCI6MTB9" rel="prev" class="inline-flex h-10 items-center gap-1.5 rounded-lg border border-gray-300 px-3.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m15 18-6-6 6-6" /></svg>
Newer
</a>
<a href="?after=eyJpZCI6MjB9" rel="next" class="inline-flex h-10 items-center gap-1.5 rounded-lg border border-gray-300 px-3.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Older
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9 18 6-6-6-6" /></svg>
</a>
</nav>| Prop | Type | Default | Description |
|---|---|---|---|
prevCursorrequired | string | null | - | Prev cursor |
nextCursorrequired | string | null | - | Next cursor |
buildHrefrequired | (cursor: string) => string | - | Builds the URL for a page number, so pages stay real links. |
ariaLabel | string | 'Pagination' | The button's accessible name. Required for icon-only buttons. |
className | string | - | Additional classes merged onto the root element. |
The right control for keyset or cursor APIs, where there are no page numbers to render - the server returns an opaque token for each direction and a null token is the only signal an end was reached. Each link is present only when its cursor exists, so the disabled state is a genuine absence of a destination rather than a styled dead link. Prefer this over numbered pages for feeds that grow while they are read, where a fixed page 7 would drift underneath the reader.