Pagination

These controls are used to allow users to navigate between pages of content.

Anatomy

Diagram of pagination component
  1. Pagination control
  2. Selected page
  3. Unselected pages

Example

Coded example

For website use
For app use
of 16

Code snippet

Figma prototype

Usage guide

Dos and don'ts

If you have more than 20 records use pagination.

Put it below the table you want to see data on.

To help users find information easily.

Return too many records could effect the performance of the app.

If infinite scroll is more appropriate.

Data with 20 records or less don't require pagination.