Pagination bar - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"></ic-pagination-bar>

<IcPaginationBartotalItems="100"/>

Pagination bar details

Props

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

Name	Description	Default
Property totalItems Attribute total-items	Total number of items to be displayed across all pages. Required type: number
Property alignment Attribute alignment	Sets the alignment of the items in the pagination bar. type: IcPaginationAlignmentOptions - "left" \| "right" \| "space-between" \| undefined	"right"
Property currentPage Attribute current-page	The current page number to be displayed on the pagination bar. type: number - number \| undefined	1
Property hideAllFromItemsPerPage Attribute hide-all-from-items-per-page	If`true` , the 'All' option will be hidden from the 'items per page' select input. type: boolean - boolean \| undefined	false
Property hideRangeLabel Attribute hide-range-label	If`true` , the number of total items and current item range or number of total pages and current page will be hidden. type: boolean - boolean \| undefined	false
Property itemLabel Attribute item-label	The text which will be used in place of 'Item' on the pagination bar. type: string - string \| undefined	"Item"
Property itemsPerPageOptions	The options which will be displayed for 'items per page' select input. type: { label: string; value: string; }[] - undefined \| { label: string; value: string; }[]
Property monochrome Attribute monochrome	If`true` , the pagination bar will display as black in the light theme, and white in dark theme. type: boolean - boolean \| undefined	false
Property pageLabel Attribute page-label	The text which will be used in place of 'Page' on the pagination bar. type: string - string \| undefined	"Page"
Property rangeLabelType Attribute range-label-type	Whether total number of items and current item range or total number of pages and current page is displayed. type: IcPaginationLabelTypes - "data" \| "page" \| undefined	"page"
Property selectItemsPerPageOnEnter Attribute select-items-per-page-on-enter	If`false` , the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed. type: boolean	true
Property selectedItemsPerPage Attribute selected-items-per-page	The items per page option to be selected. type: number - number \| undefined
Property setToFirstPageOnPaginationChange Attribute set-to-first-page-on-pagination-change	If`true` , the pagination bar is set to the first page when the 'items per page' changes type: boolean - boolean \| undefined	false
Property showGoToPageControl Attribute show-go-to-page-control	If`true` , the 'go to page' control should be displayed. type: boolean - boolean \| undefined	false
Property showItemsPerPageControl Attribute show-items-per-page-control	If`true` , the select input to control 'items per page' should be displayed. 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	Whether the displayed pagination is simple or complex. type: IcPaginationTypes - "complex" \| "simple" \| undefined	"simple"

Property

totalItems

Attribute

total-items

Total number of items to be displayed across all pages.

Required

type: number

Property

alignment

Attribute

alignment

Sets the alignment of the items in the pagination bar.

type: IcPaginationAlignmentOptions - "left" | "right" | "space-between" | undefined

Default: "right"

Property

currentPage

Attribute

current-page

The current page number to be displayed on the pagination bar.

type: number - number | undefined

Default: 1

Property

hideAllFromItemsPerPage

Attribute

hide-all-from-items-per-page

Iftrue , the 'All' option will be hidden from the 'items per page' select input.

type: boolean - boolean | undefined

Default: false

Property

hideRangeLabel

Attribute

hide-range-label

Iftrue , the number of total items and current item range or number of total pages and current page will be hidden.

type: boolean - boolean | undefined

Default: false

Property

itemLabel

Attribute

item-label

The text which will be used in place of 'Item' on the pagination bar.

type: string - string | undefined

Default: "Item"

Property

itemsPerPageOptions

The options which will be displayed for 'items per page' select input.

type: { label: string; value: string; }[] - undefined | { label: string; value: string; }[]

Property

monochrome

Attribute

monochrome

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

type: boolean - boolean | undefined

Default: false

Property

pageLabel

Attribute

page-label

The text which will be used in place of 'Page' on the pagination bar.

type: string - string | undefined

Default: "Page"

Property

rangeLabelType

Attribute

range-label-type

Whether total number of items and current item range or total number of pages and current page is displayed.

type: IcPaginationLabelTypes - "data" | "page" | undefined

Default: "page"

Property

selectItemsPerPageOnEnter

Attribute

select-items-per-page-on-enter

Iffalse , the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed.

type: boolean

Default: true

Property

selectedItemsPerPage

Attribute

selected-items-per-page

The items per page option to be selected.

type: number - number | undefined

Property

setToFirstPageOnPaginationChange

Attribute

set-to-first-page-on-pagination-change

Iftrue , the pagination bar is set to the first page when the 'items per page' changes

type: boolean - boolean | undefined

Default: false

Property

showGoToPageControl

Attribute

show-go-to-page-control

Iftrue , the 'go to page' control should be displayed.

type: boolean - boolean | undefined

Default: false

Property

showItemsPerPageControl

Attribute

show-items-per-page-control

Iftrue , the select input to control 'items per page' should be displayed.

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

Whether the displayed pagination is simple or complex.

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 icItemsPerPageChange React onIcItemsPerPageChange	Emitted when the items per page option is changed.	{ value: number; }
Web component icPageChange React onIcPageChange	Emitted when a page is navigated to via the 'go to' input. The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.	IcPageChangeEventDetail

Web component

icItemsPerPageChange

React

onIcItemsPerPageChange

Emitted when the items per page option is changed.

{ value: number; }

Web component

icPageChange

React

onIcPageChange

Emitted when a page is navigated to via the 'go to' input. The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.

IcPageChangeEventDetail

Variants

Show items per page control

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"show-items-per-page-control="true"></ic-pagination-bar>

<IcPaginationBar
totalItems="100"
showItemsPerPageControl
itemsPerPageOptions={[
{ label:"25", value:"25"},
{ label:"50", value:"50"},
{ label:"100", value:"100"},
]}
/>

Go to page control

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"show-go-to-page-control="true"></ic-pagination-bar>

<IcPaginationBartotalItems="100"showGoToPageControl/>

Alignment left

Interactive example

Web component

React

Show full code

<ic-pagination-bar
total-items="100"
alignment="left"
show-items-per-page-control="true"
></ic-pagination-bar>

<IcPaginationBar
totalItems="100"
alignment="left"
showItemsPerPageControl
/>

Alignment space between

Interactive example

Web component

React

Show full code

<ic-pagination-bar
total-items="100"
alignment="space-between"
show-items-per-page-control="true"
></ic-pagination-bar>

<IcPaginationBar
totalItems="100"
alignment="space-between"
showItemsPerPageControl
/>

Range label type

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"range-label-type="data"></ic-pagination-bar>

<IcPaginationBartotalItems="100"rangeLabelType="data"/>

Item label

Interactive example

Web component

React

Show full code

<ic-pagination-bar
total-items="100"
range-label-type="data"
item-label="Coffee"
show-items-per-page-control="true"
></ic-pagination-bar>

<IcPaginationBar
totalItems="100"
rangeLabelType="data"
itemLabel="Coffee"
showItemsPerPageControl
/>

Complex

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"type="complex"></ic-pagination-bar>

<IcPaginationBartotalItems="100"type="complex"/>

Hide range label

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"hide-range-label="true"></ic-pagination-bar>

<IcPaginationBartotalItems="100"hideRangeLabel/>

Hide all from items per page

Interactive example

Web component

React

Show full code

<ic-pagination-bartotal-items="100"show-items-per-page-control="true"hide-all-from-items-per-page="true"></ic-pagination-bar>

<IcPaginationBar
totalItems="100"
showItemsPerPageControl
itemsPerPageOptions={[
{ label:"25", value:"25"},
{ label:"50", value:"50"},
{ label:"100", value:"100"},
]}
hideAllFromItemsPerPage
/>

Last reviewed 7 August 2025 .