Pagination

Renders an accessible <nav> pagination bar. Page buttons, previous/next controls, and first/last edge buttons are all included. Long ranges are automatically truncated with dots based on the siblings and boundaries props.

Basic

<Pagination total={10} value={5} />

With edge controls

<Pagination total={20} value={10} withEdges />

Link-based navigation

<Pagination
  total={8}
  value={3}
  getHref={(page) => `/posts?page=${page}`}
/>

Colors and sizes

<Pagination total={10} value={3} color="violet" />
<Pagination total={10} value={3} color="green" size="sm" />
<Pagination total={10} value={3} size="lg" radius="xl" />

Disabled

<Pagination total={10} value={5} disabled />

Props

PropTypeDefaultDescription
totalnumber—Total number of pages (required)
valuenumber1Currently active (1-based) page number
siblingsnumber1Page buttons shown on each side of the active page
boundariesnumber1Page buttons always visible at start and end
getHref(page: number) => string—Returns href for a page; items render as <a>
size'xs'|'sm'|'md'|'lg'|'xl'—Controls the size of pagination items
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Border radius of each pagination item
colorstring—Accent color applied to the active page item
withEdgesbooleanfalseRenders first/last page edge navigation buttons
withControlsbooleantrueRenders previous and next navigation buttons
disabledbooleanfalseDisables all pagination items
classstring—Additional CSS class names
styleobject—Inline styles