Pagination

Navigate multi-page result sets. Use for tables, lists, and search results — not for scrolling within a single view.

Overview

The catnip-pagination custom element offers two layouts from Figma:

Layout	Role
default	Item range summary (21-30 of 86 items) plus Previous / page numbers / Next
compact	First / Previous / current page / of N / Next / Last

Prop	Role
modelValue	Current page (1-based)
totalPages	Total pages (optional — derived from totalItems / pageSize when omitted)
totalItems / pageSize	Drive the default-layout range summary
siblingCount	Pages shown beside the current page in default layout

Controls compose catnip-button (purpose="utility", appearance="ghost"). Selected page uses the button selected state.

Live example

Accessibility

• Root is a nav with ariaLabel (default Pagination).
• Page controls expose pageAriaLabel (default Page {page}); current page uses utility selected / aria-pressed.
• Previous / Next / First / Last use dedicated aria-label props.
• Ellipsis separators are decorative (aria-hidden).