Pagination is used to organize 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.
Two icon-only buttons, containing chevron icons 'left' and 'right', allow the user to navigate forward and backward through pages.
- Button: Mandatory button displaying the number of displayed and total results.
- Button (previous and next): Mandatory, icon-only button used to navigate between paginated results.
- Menu List: Dropdown allowing users to choose how many results are shown per page.
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.
| Property | Values | Default |
|---|---|---|
| type Variant | knownResultTotal | unknownResultTotal | smallKnownResultTotal | smallUnknownResultTotal | knownResultTotal |
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