Pagination – Code

Implementation
Pagination Props

Looking for design and usage docs?The Design Spec and Usage Guidelines documentation for the component will be available soon. Reach out to our team in the #ask-designsystem channel if you have questions or need assistance!

Common Examples

Using with Card grid

import { Pagination } from "@servicetitan/anvil2";

function ExampleComponent() {
return (

<Pagination
  page={1}
  itemsPerPage={10}
  totalItemCount={100}
  itemsPerPageOptions={[10, 20, 50]}
  showCount={false}
  onPageChange={(page) => console.log(page)}
  onItemsPerPageChange={(itemsPerPage) => console.log(itemsPerPage)}
/>
); }

`Pagination` Props

In addition to the props listed below, the Pagination component can accept any valid HTML nav props.

itemsPerPage

number

required

Number of items displayed per page

page

number

required

The current page number

itemsPerPageLabel

string

default:"\"Rows per page\""

Custom label displayed before the items-per-page selector

itemsPerPageOptions

number[]

Available options for items per page selection

onItemsPerPageChange

(itemsPerPage: number) => void

Callback when items per page changes

onPageChange

(page: number) => void

Callback when page changes

showCount

boolean

Whether to display the item count information

totalItemCount

number

Total number of items across all pages

Last modified on April 9, 2026

Pagination – Design

Tokens

⌘I

Anvil2 Web

Resources

Pagination – Code

Common Examples

Using with Card grid

Anvil2 Web

Resources

Documentation Index

​Common Examples

​Using with Card grid

​Pagination Props

Common Examples

Using with Card grid

`Pagination` Props