Pagination | Calcite Design System

Pagination is used to denote and navigate between pages of content.

Overview

Pagination provides a way to display and browse large amounts of content. Intended to be placed at the bottom of a group of content, Pagination should not be used in place of Tabs or traditional top-level navigation.

Sample

Usage

Navigating between pages of similar content

Accessibility

Key	Function
`Tab`	Moves focus to next page number. If the current focus is the last page, focus will exit the component.
`Tab` and `Shift`	Moves focus to previous item. If the current focus is the first item, focus will exit the component.
`Enter`	Selects the currently focused page number.
`Space`	Selects the currently focused page number.

API reference

Properties

Property	Attribute	Description	Type	Default
groupSeparator	group-separator	When `true`, number values are displayed with a group separator corresponding to the language and country format.	`boolean`	`false`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
numberingSystem	numbering-system	Specifies the Unicode numeral system used by the component for localization.	`NumberingSystem`
pageSize	page-size	Specifies the number of items per page.	`number`	`20`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
startItem	start-item	Specifies the starting item number.	`number`	`1`
totalItems	total-items	Specifies the total number of items.	`number`	`0`

Styles

Name	Description
--calcite-pagination-color	Specifies the component's item color.
--calcite-pagination-color-hover	Specifies the component's item color when hovered or selected.
--calcite-pagination-color-border-hover	Specifies the component's item bottom border color when hovered.
--calcite-pagination-color-border-active	Specifies the component's item bottom border color when selected.
--calcite-pagination-background-color	Specifies the component's item background color when active.
--calcite-pagination-icon-color-background-hover	Specifies the component's chevron item background color when hovered.

Events

Name	Description	Behavior
calcitePaginationChange	Emits when the selected page changes.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
goTo	Set a specified page as active.	`goTo(page: number \| "start" \| "end"): Promise<void>`
nextPage	Go to the next page of results.	`nextPage(): Promise<void>`
previousPage	Go to the previous page of results.	`previousPage(): Promise<void>`
setFocus	Sets focus on the component's first focusable element.	`setFocus(options?: FocusOptions): Promise<void>`