[component]
Dev Mode
Pagination
Description
Break large sets of content into smaller, manageable pages. Used primarily in the staff portal to parse large tables.
1
2
3
4
5
Total Pages
Usage Guidelines
Do
Use pagination to reduce the resources required when loading data.
Split information across multiple pages.
Don't
Use pagination if only one page is needed.
Accessibility
The tappable area of each pagination item should fit within a 44pt square.
Props
Name
Type
Required
Description
page
number
Required
setPage
Required
totalPages
number
Required
testID
string
Root test id for the primary interactive element or container.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
Medium article: 'Pagination do’s & don’ts'
Related
Top navigation, Bottom navigation
Examples
PaginationSizes
1
2
3
4
5
PaginationMore
1
2
3
10