Pagination

Usage

Use paginator to let users move through a collection of items (either as part of the data grid or a table) that has been split into pages.

The buttons of the paginator are used to move back and forth between pages. Other than the list of page numbers, paginator should show buttons to go to the first and last page and, optionally, buttons to cycle to previous or next page.

Behaviour

• Paginator should always show clear options to navigate back and forth relative to the currently selected item

• Paginator should hint to users that they are at the first or the last page of the collection by disabling the corresponding button

• The default page shown when using the paginator should alway be first - “1”

• The currently selected page number should have different style and not be interactive, while others can be interacted with to progress to a different page

Best Practices

• Paginator should always be placed to the bottom right of the data collection it controls

• Paginator can be combined with other visual aids to ensure better data control: page size, current page indication, row indication

States

Paginator sizing is following the small button dimensions - 24px. Disabled state only applies to the chevrons