Form

Pagination

Page navigation control with arrows or numbered jumps for splitting large data sets.

Loading playground

Overview

Pagination lets users move through paged content with previous/next controls. It fits product grids, search results, and any list that needs explicit page navigation.

Pick a variant by how the current position should read:

`variant`	What it renders
`'arrows'`	Default. Previous/next chevrons with numbered page buttons (and ellipses) between them.
`'numbers'`	Previous/next arrows around a compact `currentPage/totalPages` label (e.g. `7/42`). No numbered jump buttons.

Key Business & UX Benefits

Two variants in one component let merchandisers pick between numbered jump-buttons and the compact current/total readout without commissioning a custom alternative.
Explicit page navigation keeps URLs shareable and crawlable, supporting SEO on category and search pages where infinite scroll hurts indexing.
Keyboard and screen-reader support is baked in, so traversing a long list stays accessible without per-page accessibility patches.

Usage

LPagination

Numbered Variant

<LPagination
    v-model:page="page"
    :total="120"
    :items-per-page="20"
    variant="numbers"
  />

Feature List

Two `variant` values ('arrows' default, 'numbers') cover numbered jump-buttons with ellipses and the compact `currentPage/totalPages` readout
`total` plus `itemsPerPage` compute total pages via `Math.ceil`, so consumers pass the data shape they already have
`hrefTemplate(({ page }) => string)` swaps rendered `<button>` elements for `<a>` with template-driven URLs, keeping pages shareable and crawlable
`scrollToTop` option scrolls to top on page change, keeping the new page visible without manual handlers
Surface-tone aware: current-page button switches to 'tertiary' on dark surfaces, 'primary' on light, for legibility
Named v-model on `page` keeps the active index in sync with the consumer's URL or store state

API Reference

Prop	Default	Type
`total`required		`number`
`itemsPerPage`required		`number`
`page`required		`number`
`surfaceTone`		`SurfaceTone ("dark" \| "light" \| "bright")`
`siblingCount`	`1`	`number`
`showEdges`	`true`	`boolean`
`defaultPage`	`1`	`number`
`variant`	`arrows`	`"arrows" \| "numbers"`
`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

Explicit-click pagination control that pairs a Load More button with a loaded-vs-total progress indicator and a back-to-top link.

Quantity Picker

Stepper input for product quantity with increment / decrement buttons and direct keyboard entry.