Pagination is used to organise and divide large amounts of content on separate pages. It also allows users to control the visible amount of data on each page through an action menu.
Anatomy
Pagination consists of a button that displays a range number (housed within the action menu). When pressed, the button opens an action menu where the user can select a quantity option, triggering an immediate change.
Note: When there is less than the default amount of items (e.g. 1-9 of 9 results), or if the total results are “unknown” the Button will be rendered as text only to remove the unnecessary/unused interaction features.
Two icon-only buttons, containing chevron icons 'left' and 'right', allow the user to navigate forward and backward through pages.
Focus order
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
If the page displays less than the default number, the dropdown menu will be disabled and the total results will be rendered as text. The button will be rendered with the dropdown menu when the total results exceeds the default available range (e.g. 1 - 12 of 20 Projects).
When a page cannot continue forward or backward, the icon-only button for that direction will be disabled to indicate the ‘end of the line’.
If totalResults is unknown, the button will be replaced with text and the dropdown menu will be disabled. Note: An intentional decision has been made to disable the paging options in this scenario due to performance considerations.
| Property | Values | Default |
|---|---|---|
| Variant Variant | Known Result Total | Unknown Result Total | Small Known Result Total | Small Unknown Result Total | Known Result Total |
Component dependencies
This component is internally dependent on the following components:
Component dependencies
This component is internally dependent on the following components:
Help and support