Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Pagination

Guidance Code Accessibility

Component demo

Interactive example

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

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

Iftrue , the pagination will not allow interaction.

type: boolean - boolean | undefined
false
Property hideCurrentPage
Attribute hide-current-page

Iftrue , 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

Iftrue , 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

Iftrue , 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

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

Hide current page (only in 'simple' type)

Interactive example

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

Theme

Interactive example

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

Monochrome

Interactive example

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

Boundary and Adjacent items set

Interactive example

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

Disabled

Interactive example

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

Label

Interactive example

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

Default page

Interactive example

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

Last reviewed 31 May 2024 .
Navigated to Pagination - Intelligence Community Design System