Description

Pagination is used where a large amount of data is divided into pages. It allows users to understand on which page they are currently on, as well as to navigate to next, previous, first or last page.

Open

Usage & Behavior

General guidelines

Structure

The pagination component consists of five elements: 4 Icon Buttons and a Text Field.

Element	Comments

Element	Comments
First button	Enabled on any page, except for the first one.	Open
Previous button	Enabled on any page, except for the first one.
Page Indicator	Showing the number of the current page inside a text field, as well as the total number of pages.
Next button	Enabled on any page, except for the last one.
Last button	Enabled on any page, except for the last one.

Placement and Positioning

• The pagination component will be located under the corresponding table or list, aligned to the left (unless otherwise specified).

• The component will be located outside the corresponding object’s container, so it will always be visible.

Default State

By default the first page is shown. Therefore, the First and Previous buttons will be disabled and the page indicator will show the number 1.

Internal logic

• When the first page is in view, the Previous and First buttons will be disabled.

• When the last page is in view, the Next and Last buttons will be disabled.

• When pagination is not required (e.g. rows in a table are beneath the threshold of pagination), it will not be displayed.

States

For component states, see Icon Buttons and Text Field.

Interaction

• Clicking The First button goes to the first page.

• Clicking the Previous button goes to the previous page.

• The page indicator:

  • The text field will only allow numeric input.

  • Pressing the Enter key while the text field is in focus and has a valid number will go to the relevant page.

  • If the number entered is 0, pressing Enter will go to the first page, changing the number to 1.

  • If the number entered is larger than the total amount of pages, pressing Enter will go to the last page, changing the number accordingly.

  • If the number in the text field was deleted, pressing Enter will return the number of the current page.

• Clicking the Next button goes to the next page.

• Clicking the Last button goes to the last page.

Best practices

Use:

• when we want to allow users to get a good mental model of the data or to share specific pages using their URLs.

Don’t use:

• for research inquiry or casual browsing, when users do not necessarily know what they are looking for → use lazy loading (infinite scroll).

• to navigate between tabs, views, or actions.

• when the pages contain forms allowing the user to complete a task in a linear fashion → use a wizard.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Each area of the pagination is a component (either an Icon button or Text Field), and is treated individually.

Design

Code