Controls that allow for content grouping in a range of pages. The pagination component is placed below the content each page displays.
Pagination usage in Carl's Shop + catalogue page
In a general manner, the pagination component allows the user to navigate through the pages that group a list of items. The user can navigate back and forth or select a specific page to navigate to.
However, in order to adapt to each use case, the pagination has 3 different types, as you can see below.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Regular pagination |
When the pagination affects the main content of the page, e.g. a product catalogue page with many products to display. |
Below the content each page displays |
Navigate back and forth or select a specific page to navigate to |
|
Input pagination |
When there are dezens or hundreds of pages and the user knows exactly to which page they want to navigate to. |
Same as above |
Same as above |
|
Compact pagination |
When the pagination doesn't affect the main content of the page, but only a small section, e.g. a "new articles" section in the middle of a homepage. |
Same as above |
Same as above |
Anatomy
Structure
|
|
|
|
|
|
|
label |
Describes the action of the previous button and the next button.
Only available on the regular pagination. |
|
previous button |
A button that allows the user to navigate to the previous page. |
|
next button |
A button that allows the user to navigate to the next page. |
|
current page |
A selected button informing about the current page the user's at. |
|
ellipsis |
When there are more than 3 pages, the ellipsis represents the hidden pages on the pagination component. Check its placement and behaviour here.
Only available on the regular pagination. |
|
number input |
A form field that allows the user to enter the page number they wish to navigate.
Only available on the input pagination. |
|
total |
Displays the total number of pages.
Only available on the input pagination. |
|
numbering |
Displays the current page position followed by the total number of pages.
Only available on the input pagination. |
Sizes and Spaces
|
In the regular pagination component, every element group is set apart by 8px. The height of the buttons is 40px (as they are medium transparent buttons).
|
|
In the input pagination component, every element group is set apart by 8px. The height of the buttons and number input is 40px.
|
|
In the compact pagination component, every element group is set apart by 6px. The compact pagination component doesn't have buttons for each page. There are only two buttons, the previous and next, and their height is 24px. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Type |
regular input compact |
Set the layout for the pagination. |
|
Labels |
true false |
Shows or hides the labels |
|
State |
default sisabled |
Default and disable state to use when needed |
Behaviour
Interaction
Behaviour of the pages buttons on the pagination component
Responsiveness
The pagination component's width, height or layout do not vary with the device size.
Guidelines
|
|