Github

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Component variations

Basic Pagination

Standard pagination component with 5 pages

Small Dataset

Pagination shows all pages when total is 7 or fewer

Large Dataset - First Pages

Pagination on first pages shows first 5 pages, ellipsis, and last page

Large Dataset - Middle Pages

Pagination in the middle shows first page, ellipsis, current ±1, ellipsis, and last page

Large Dataset - Last Pages

Pagination on last pages shows first page, ellipsis, and last 5 pages

Usage Guidelines

Import

Import the pagination component in your module or component:

import-pagination.ts

Copy code

Basic Implementation

Here is a basic example of using the pagination component:

pagination-example.html

Copy code

Listening to Page Change Events

Handle page navigation by listening to the (pageChange) event emitted by the component:

pagination-events.html

Copy code

pagination-events.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
totalPages
number
1
No
Total number of pages
currentPage
number
1
No
Currently active page number

Outputs

Event
Type
Description
pageChange
EventEmitter<number>
Emitted when a page is selected

Best Practices

When to Use

  • Use Pagination when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Pagination when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always set the currentPage to a valid page number between 1 and totalPages
  • Use pagination for datasets with more than 10-15 items
  • Implement data loading when pageChange event is emitted
  • Show loading states while fetching data for the new page
  • Preserve pagination state in your routing or component state management
  • Consider using pagination alongside filters to allow users to refine results
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the pagination features in this section

Current Page: 1

example.html

Copy code