Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Principles
Use when
- a data table includes enough items to necessitate pagination.
- a page contains enough content to justify breaking it into smaller chunks to improve a user’s experience.
Don't use when
- the data does not require a permanent location.
- the segmentation of the data is not necessary.
Structure
- Previous and next buttons
- Page buttons
- Current page
- Truncation
Properties
Style
|
White |
When pagination is needed use on gray surface layouts, especially on lists and data tables. |
|
Gray |
When pagination is needed used on surface layouts that are lighter and component of its background layout. |
Size
|
Default |
The default should used for segmenting contents on general areas like index and show pages. |
|
Small |
Small size is when pagination is needed to use on smaller surfaces like modals. |
Behavior
Placement
Pagination should be positioned under majority index pages, typically beneath lists. To facilitate user navigation between pages, these lists are often placed in the bottom-left corner. In some cases, it can also be seen as part of the table or list footer.
Additionally, to indicate the total number of records on the page or specify the number of records to be displayed per page along with pagination, it should be used with an aggregate component.
Segmentation
The number of records in lists on an index page varies based on the content from the current source. A list can accommodate a maximum of 15 records, with the remaining records distributed across pages. (This maximum number may vary depending on the products' database and service)
Truncation
Truncation is used in pagination to limit visible page links, preventing clutter. It displays a subset of adjacent pages around the current one, often with ellipses (...) denoting omitted pages.
Accessibility
Focus states are the same as button accessibility properties.
Figma source