Pagination

A row of page buttons built with DaisyUI's join + btn pattern. Supports prev/next controls, sizes, outline variant, smart ellipsis windowing, and link-based rendering.

Basic

Ten pages, page 4 active. Prev/next arrows shown by default.

Without prev / next

Set showPrevNext= to hide the « / » controls.

First page (prev disabled)

When current=1 the « button is automatically disabled.

Last page (next disabled)

When current equals total the » button is automatically disabled.

Sizes

Five sizes — xs through xl.

Outline variant

Pass variant="outline" to use outlined buttons for inactive pages.

As links

Pass an href function to render <a> tags — useful for server-side pagination with URL query params.

Smart ellipsis

For large page counts the component always shows first, last, and ±2 around the current page, collapsing the rest into … gaps.

Few pages (no ellipsis)

When total ≤ 7 all pages are shown — no gaps needed.

In a table footer

Common real-world pattern: pagination below a data table.