Pagination
Allows users to navigate through a large set of content divided into discrete pages
Type
- Type 1: Ideal for contexts where users might want to jump to a specific page within a large number of pages.
- Type 2: Suitable for simpler navigation where users primarily move forward or backward.
- Type 3: Similar to Type 2, this type displays the current page and total pages on left and navigation buttons on far right.
Previous & Next button
Use Button Type=Secondary as button component. When button is disabled, remove box-shadow under the button.
- Default: An element appears when it is not being interacted with.
- Hover: An element appears when a user moves the mouse pointer over it.
- Focused: An element appears when it is selected or active, usually through keyboard navigation (TAB) or a mouse click.
- Previous button: Disabled when user is on 1st page. Enabled when user is on not on first page.
- Next button: Disabled when user is on the last page. Enabled when user is not on the last page.
- Disabled both buttons: When there is only 1 page.
Pagination numbers
Use Button Type=Tertiary as button component.
- Default
- Hover & Selected
- Default Focused
- Not interactive
- Focused & Selected