Featured
PaginationNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 frameworksIntermediate
Loading…
A pill-shaped inline pager with a tiny count and full-size arrow tap targets.
<!--
A pill-shaped inline control for tight spots like a card header. The label is
small, but the two arrow links keep a full 40px-square hit area - visual
density never shrinks the tap target below the accessible minimum.
-->
<nav aria-label="Pagination" class="inline-flex items-center rounded-full border border-gray-300 dark:border-gray-700">
<a href="?page=2" rel="prev" aria-label="Previous page" class="inline-flex h-10 w-10 items-center justify-center rounded-l-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100">
<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>
</a>
<span class="min-w-14 px-1 text-center text-xs font-medium tabular-nums text-gray-700 dark:text-gray-300" role="status" aria-live="polite">3 / 12</span>
<a href="?page=4" rel="next" aria-label="Next page" class="inline-flex h-10 w-10 items-center justify-center rounded-r-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100">
<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 |
|---|---|---|---|
currentPagerequired | number | - | The active page number, starting at 1. |
totalPagesrequired | number | - | How many pages exist in total. |
buildHrefrequired | (page: number) => 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. |
A dense control for a card header or toolbar. The label shrinks to `text-xs`, but the two arrow links keep a full 40px-square hit area - visual density never drops the tap target below the accessible minimum. The count is a live region, the arrows carry `aria-label`s, and bounds disable by dropping the href. Inline `border` and rounded ends make it read as one compact object.