Pagination - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-paginationpages="15"></ic-pagination>
<ic-paginationpages="15"type="complex"></ic-pagination>

<IcPaginationpages={15}/>
<IcPaginationpages={15}type="complex"/>

Pagination details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property pages Attribute pages	The total number of pages. Required type: number
Property adjacentPageCount Attribute adjacent-page-count	The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2. type: number - number \| undefined	1
Property boundaryPageCount Attribute boundary-page-count	The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2. type: number - number \| undefined	1
Property currentPage Attribute current-page	The current page displayed by the pagination. type: number - number \| undefined	this.defaultPage
Property defaultPage Attribute default-page	The default page to display. type: number - number \| undefined	1
Property disabled Attribute disabled	If`true` , the pagination will not allow interaction. type: boolean - boolean \| undefined	false
Property hideCurrentPage Attribute hide-current-page	If`true` , the current page of the simple pagination will not be displayed. type: boolean - boolean \| undefined	false
Property hideFirstAndLastPageButton Attribute hide-first-and-last-page-button	If`true` , the first and last page buttons will not be displayed. type: boolean - boolean \| undefined	false
Property label Attribute label	The label for the pagination item (applicable when simple pagination is being used). type: string - string \| undefined	"Page"
Property monochrome Attribute monochrome	If`true` , the pagination will display as black in the light theme, and white in dark theme. type: boolean - boolean \| undefined	false
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property type Attribute type	The type of pagination to be used. type: IcPaginationTypes - "complex" \| "simple" \| undefined	"simple"

Property

pages

Attribute

pages

The total number of pages.

Required

type: number

Property

adjacentPageCount

Attribute

adjacent-page-count

The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.

type: number - number | undefined

Default: 1

Property

boundaryPageCount

Attribute

boundary-page-count

The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.

type: number - number | undefined

Default: 1

Property

currentPage

Attribute

current-page

The current page displayed by the pagination.

type: number - number | undefined

Default: this.defaultPage

Property

defaultPage

Attribute

default-page

The default page to display.

type: number - number | undefined

Default: 1

Property

disabled

Attribute

disabled

Iftrue , the pagination will not allow interaction.

type: boolean - boolean | undefined

Default: false

Property

hideCurrentPage

Attribute

hide-current-page

Iftrue , the current page of the simple pagination will not be displayed.

type: boolean - boolean | undefined

Default: false

Property

hideFirstAndLastPageButton

Attribute

hide-first-and-last-page-button

Iftrue , the first and last page buttons will not be displayed.

type: boolean - boolean | undefined

Default: false

Property

label

Attribute

label

The label for the pagination item (applicable when simple pagination is being used).

type: string - string | undefined

Default: "Page"

Property

monochrome

Attribute

monochrome

Iftrue , the pagination will display as black in the light theme, and white in dark theme.

type: boolean - boolean | undefined

Default: false

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

type

Attribute

type

The type of pagination to be used.

type: IcPaginationTypes - "complex" | "simple" | undefined

Default: "simple"

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icPageChange React onIcPageChange	Emitted when a page is selected.	IcChangeEventDetail

Web component

icPageChange

React

onIcPageChange

Emitted when a page is selected.

IcChangeEventDetail

Methods

Name	Description	Signature
Method setCurrentPage	Sets the currently displayed page.	setCurrentPage(page: number) => Promise<void>

Method

setCurrentPage

Sets the currently displayed page.

setCurrentPage(page: number) => Promise<void>

Variants

Hide first and last page buttons

Interactive example

Web component

React

Show full code

<ic-pagination
hide-first-and-last-page-button="true"
pages="15"
></ic-pagination>

<IcPaginationhideFirstAndLastPageButtonpages={15}/>

Hide current page (only in 'simple' type)

Interactive example

Web component

React

Show full code

<ic-paginationhide-current-page="true"pages="15"></ic-pagination>

<IcPaginationhideCurrentPagepages={15}/>

Theme

Interactive example

Web component

React

Show full code

<ic-paginationtheme="light"pages="15"class="light-background"></ic-pagination>
<ic-paginationtheme="dark"pages="15"class="dark-background"></ic-pagination>

<IcPaginationtheme="light"pages={15}class={classes.lightBackground}/>
<IcPaginationtheme="dark"pages={15}class={classes.darkBackground}/>

Monochrome

Interactive example

Web component

React

Show full code

<ic-paginationtheme="light"monochrome="true"pages="15"class="light-background"></ic-pagination>
<ic-paginationtheme="dark"monochrome="true"pages="15"class="dark-background"></ic-pagination>

<IcPaginationtheme="light"monochromepages={15}class={classes.lightBackground}/>
<IcPaginationtheme="dark"monochromepages={15}class={classes.darkBackground}/>

Boundary and Adjacent items set

Interactive example

Web component

React

Show full code

<ic-pagination
type="complex"
adjacent-page-count="2"
boundary-page-count="2"
pages="15"
></ic-pagination>

<IcPagination
type="complex"
adjacentPageCount={2}
boundaryPageCount={2}
pages={15}
/>

Disabled

Interactive example

Web component

React

Show full code

<ic-paginationtype="complex"disabled="true"pages="12"></ic-pagination>

<IcPaginationtype="complex"disabledpages={12}/>

Label

Interactive example

Web component

React

Show full code

<ic-paginationlabel="Slide"pages="12"></ic-pagination>

<IcPaginationlabel="Slide"pages={12}/>

Default page

Interactive example

Web component

React

Show full code

<ic-paginationpages="12"default-page="4"></ic-pagination>

<IcPaginationpages={12}defaultPage={4}/>

Last reviewed 31 May 2024 .