Pagination

A component that separates out table content into discrete pages.

Component checklist

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

Usage Guidelines

It is important to note that pagination is most commonly used in conjunction with tables.

If the item count per page cannot be applied due to technical limitations, use cursor pagination.

Advanced pagination should be used whenever possible. However, in cases where there is limited data being displayed and/or limited real estate, simple pagination may be used.

 

Pagination Position

Do
Table with pagination below.

The pagination component should be placed below the content that it is associated with.

Don't
Table with pagination above.

Placing the pagination at the top of its associated content should be avoided.