Form

Pagination

Page navigation component for splitting large data sets across multiple pages.

Overview

The Pagination component lets users move through paged content (e.g. product lists or search results) with previous/next and optional page numbers. It keeps navigation consistent and accessible.

Key Business & UX Benefits

Lets users browse large result sets without endless scrolling.
Clear previous/next and page numbers reduce confusion.
Accessible keyboard and focus support for all controls.
Fits product grids, search results, and any paged content.

Pro-Tip from Larry: Use Pagination when you have many pages so users can jump to a specific page.

Usage

Pagination

Feature List

Previous and next controls with optional page numbers
Configurable page size and total count
Accessible keyboard and focus support
Theme-aligned styling for light and dark modes

API Reference

Prop	Default	Type
`total`required		`number`
`itemsPerPage`required		`number`
`page`required		`number`
`siblingCount`	`1`	`number`
`showEdges`	`true`	`boolean`
`defaultPage`	`1`	`number`
`isNavigationNumbers`		`boolean`
`hrefTemplate`		`(context: { page: number; }): string` If set, switches `<button>` to `<a>` elements and use this template-function to output the href for the target page. Setting this will disable the internal page change handler and use the hrefTemplate to navigate to the page. The page-model will no longer be updated.
`scrollToTop`	`true`	`boolean` Scroll to the top of the page when navigating to a different page.

Event	Type
`update:page`	`(event: "update:page", value: number): void`

Edit this pageorReport an issue

Pagination component combining infinite scroll with Load More button.

Quantity Picker

A stepper input for selecting product quantities with increment/decrement buttons, direct input, and stock validation.