Pagination

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

Overview

Pagination is a useful way for the user to browse large amounts of content. Avoid using Pagination for small amounts of content or for carousel-type interactions. 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 navigations.

Usage

  • Navigating between pages of similar content

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus to next item. If the current focus is the last item, the focus will exit the component
Tab and ShiftMove focus to previous item. If the current focus is the first item, the focus will exit the component
EnterMake currently focused item selection
SpaceMake currently focused item selection

API reference

calcite-pagination
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
numnum

number of items per page

numberA number
20 (default)
scalescale

The scale of the pagination

typedChoose from a set of typed values
lm (default)s
startstart

index of item that should begin the page

numberA number
1 (default)
textLabelNexttext-label-next

Used as an accessible label (aria-label) for the next button

stringA custom string
"Next" (default)
textLabelPrevioustext-label-previous

Used as an accessible label (aria-label) of the previous button

stringA custom string
"Previous" (default)
totaltotal

total number of items

numberA number
0 (default)

Events

NameDescriptionDetail
calcitePaginationChange

Emitted whenever the selected page changes.

bubblescomposedcancelable
PaginationDetailView documentation
calcitePaginationUpdate
deprecateduse calcitePaginationChange instead

Emitted whenever the selected page changes.

bubblescomposedcancelable
PaginationDetail

Methods

NameDescriptionSignatureReturns
nextPage

Go to the next page of results

nextPage() => Promise<void>Promise<void>
previousPage

Go to the previous page of results

previousPage() => Promise<void>Promise<void>

Styles

NameDescriptionCSS Variable
--calcite-pagination-spacing

the amount of padding around each pagination item

--calcite-pagination-spacing

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.