Inspire Design System : Pagination

Pagination is used when splitting content into multiple pages. It contains elements for movement in the page sequence (next/previous page).

Design Kit: RELEASED

Bobwai component: bobwai--pager RELEASED

Pagination is positioned below a table or a list. Use pagination when there are 25 elements or more per page.

Items per page - The dropdown allows users to set items per page.
Go to page - The spinner allows users to jump to a specific page.
First page link - Allows user to navigate to the first page.
Previous page link - Allows users to navigate to the previous page.
Active selection - Indicator of the current page.
Truncation - When the number of pages exceeds 5 pages, an ellipsis is used to truncate the remaining pages.
Next page link - Allows users to navigate to the next page.
Last page link - Allows users to navigate to the last page.

Pagination can be customized based on the user needs.

For a table with a large amount of data.

For a table with a small amount of data, typically static data.

Default state.

Key	Interaction
<Tab> and <Shift> + <Tab>	Tab keys allow moving among the pager controls.
Arrows ⇦ ⇨	Increasing / decreasing the value in a dropdown or a spinner.
Up Arrow ⇧	Navigates to different options within the menu. Allows increasing the value in a dropdown or a spinner.
Down Arrow ⇩	Navigates to different options within the menu. Allows increasing the value in a dropdown or a spinner.
<Enter>	Opens the menu and confirms the select item.
<Esc>	Closes the menu.

Table: bobwai–table - Tables are used to organize and display data efficiently using rows and columns.

Used In	Type	px	Token
Text color	Color		color-text-interactive-200
Icon color	Color		color-icon-100
Icon size	Size		sizing-icon-200
Background color	Color		color-bg-interactive-200
Text font	Font		font-strong
Background corner radius	Corner radius	8	radius-button-200
Hover
Background color	Color		color-bg-interactive-200-hover (1)
Pressed
Background color	Color		color-bg-interactive-200-pressed
Selected
Background color	Color		color-bg-interactive-200-selected (1)
Disabled
Disabled (applied on the whole object)	Opacity		opacity-disabled
Focus
Focus border color	Color		color-focus-200
Focus border width	Width	1	border-width-100
Focus border corner radius	Corner radius		radius-button-200
Focus inner spacing	Spacing	2	spacing-100

Used In	Type	PX	Token
Vertical space at the top of pagination	padding-top	8	spacing-300
Horizontal space on the right of inputs	padding-right	16	spacing-500
Vertical space in the pagination	padding-top, padding-bottom	4	spacing-200
Horizontal space between toolbar buttons	padding-left, padding-right	4	spacing-200

Provide labels and instructions that are clear and concise.
add role=navigation and aria-label to make it clearer that navigation is intended for the pagination.
Navigation Design Pattern guidelines.

Pagination is used when splitting content into multiple pages. It contains elements for movement in the page sequence (next/previous page).

Design Kit: RELEASED

Bobwai component: bobwai--pager RELEASED

Pagination is positioned below a table or a list. Use pagination when there are 25 elements or more per page.

Items per page - The dropdown allows users to set items per page.
Go to page - The spinner allows users to jump to a specific page.
First page link - Allows user to navigate to the first page.
Previous page link - Allows users to navigate to the previous page.
Active selection - Indicator of the current page.
Truncation - When the number of pages exceeds 5 pages, an ellipsis is used to truncate the remaining pages.
Next page link - Allows users to navigate to the next page.
Last page link - Allows users to navigate to the last page.

Pagination can be customized based on the user needs.

For a table with a large amount of data.

For a table with a small amount of data, typically static data.

Default state.

Key	Interaction
<Tab> and <Shift> + <Tab>	Tab keys allow moving among the pager controls.
Arrows ⇦ ⇨	Increasing / decreasing the value in a dropdown or a spinner.
Up Arrow ⇧	Navigates to different options within the menu. Allows increasing the value in a dropdown or a spinner.
Down Arrow ⇩	Navigates to different options within the menu. Allows increasing the value in a dropdown or a spinner.
<Enter>	Opens the menu and confirms the select item.
<Esc>	Closes the menu.

Table: bobwai–table - Tables are used to organize and display data efficiently using rows and columns.

Used In	Type	px	Token
Text color	Color		color-text-interactive-200
Icon color	Color		color-icon-100
Icon size	Size		sizing-icon-200
Background color	Color		color-bg-interactive-200
Text font	Font		font-strong
Background corner radius	Corner radius	8	radius-button-200
Hover
Background color	Color		color-bg-interactive-200-hover (1)
Pressed
Background color	Color		color-bg-interactive-200-pressed
Selected
Background color	Color		color-bg-interactive-200-selected (1)
Disabled
Disabled (applied on the whole object)	Opacity		opacity-disabled
Focus
Focus border color	Color		color-focus-200
Focus border width	Width	1	border-width-100
Focus border corner radius	Corner radius		radius-button-200
Focus inner spacing	Spacing	2	spacing-100

Used In	Type	PX	Token
Vertical space at the top of pagination	padding-top	8	spacing-300
Horizontal space on the right of inputs	padding-right	16	spacing-500
Vertical space in the pagination	padding-top, padding-bottom	4	spacing-200
Horizontal space between toolbar buttons	padding-left, padding-right	4	spacing-200

Provide labels and instructions that are clear and concise.
add role=navigation and aria-label to make it clearer that navigation is intended for the pagination.
Navigation Design Pattern guidelines.

Inspire Design System : Pagination

Pagination is used when splitting content into multiple pages. It contains elements for movement in the page sequence (next/previous page).

Component Status

Content Overview

Usage

Anatomy

Variants

Full Version (Default)

Basic (Links Only)

Behavior

States

Enabled

Hover

Pressed

Focused

Disabled

Selected

Keyboard Interactions

Related Components

Interactive States

Toolbar Button

Spacing and Density

Default Size

Accessibility

Pagination is used when splitting content into multiple pages. It contains elements for movement in the page sequence (next/previous page).

Component Status

Content Overview

Usage

Anatomy

Variants

Full Version (Default)

Basic (Links Only)

Behavior

States

Enabled

Hover

Pressed

Focused

Disabled

Selected

Keyboard Interactions

Related Components

Interactive States

Toolbar Button

Spacing and Density

Default Size

Accessibility

Attachments: