Pagination

Use Pagination to divide a large set of items into pages and let shoppers move between them with previous, next, and numbered controls. Provide routePage to render the controls as links instead of buttons.

Import

import { Pagination } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
currentPage	number	No	The current active page. Defaults to 1.
totalPages	number	No	The total number of pages. Defaults to 10.
onChange	(currentPage: number, e?: Event) => void	No	Called with the resulting page number when the page changes.
routePage	(page: number) => string	No	Generates an href for each page. When provided, the controls render as anchor tags instead of buttons, for proper SEO and link behavior.
className	string	No	Custom CSS class name.

Example

Render a paginated control and update the active page on change.

import { Pagination, provider } from '/@dropins/tools/components.js';

const instance = await provider.render(Pagination, {
  totalPages: 20,
  currentPage: 1,
  onChange: (page) => instance.setProps((prev) => ({ ...prev, currentPage: page })),
})(document.querySelector('.pagination'));

To render the controls as links, add routePage:

await provider.render(Pagination, {
  totalPages: 10,
  currentPage: 1,
  routePage: (page) => `?page=${page}`,
})(document.querySelector('.pagination'));

Related

• ContentGrid — lay out the items you paginate.
• Design tokens — the colors, spacing, and typography the controls use.