Skip to main contentCarbon Design System

Pagination

The following page documents visual specifications such as color, typography, structure, and size.

Color

Pagination color

ElementPropertyColor token
Containerbackground-color$layer *
Borderborder-top$border-subtle *
Text: items per pagetext-color$text-primary
Text: number of itemstext-color$text-primary
Text: page range of total itemstext-color$text-secondary
Iconfill$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of pagination color

Example of pagination color

Pagination interactive state color

The pagination variant has nested select and ghost icon buttons with interactive states. See the select and button style tab for more information.

StateElementPropertyColor token
HoverBackgroundbackground-color$layer *
FocusBorderborder$focus
DisabledTexttext-color$text-primary
Iconfill$icon-primary
Backgroundbackground-color$layer *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of pagination interactive state color

Example of pagination interactive state color

Pagination nav color

ElementPropertyColor token
Containerbackground-colortransparent
Texttext-color$text-primary
Iconfill$icon-primary
Page: selectedborder$border-interactive
Example of pagination nav color

Example of pagination nav color

Pagination nav interactive state color

The pagination nav variant has nested ghost icon buttons with interactive states. See the button style tab for more information.

StateElementPropertyColor token
HoverBackgroundbackground-color$layer-hover *
FocusBorderborder$focus
SelectedBorderborder$border-interactive
DisabledTexttext-color$text-disabled
Iconfill$icon-disabled
Backgroundbackground-colortransparent

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of pagination nav interactive state color

Example of pagination nav interactive state color

Typography

Pagination text should be set in sentence case with the first letter of each word capitalized.

Pagination typography

ElementFont-size (px/rem)Font-weightType token
Text14 / 0.875Regular / 400$body-compact-01

Pagination nav typography

ElementFont-size (px/rem)Font-weightType token
Text: unselected14 / 0.875Regular / 400$body-compact-01
Text: selected14 / 0.875SemiBold / 600$heading-compact-01

Structure

Pagination structure

The pagination variant is connected to the bottom of data tables, and its width is determined by the width of the data table.

ElementPropertypx / remSpacing token
Containerborder1px
padding-left, padding-right16 / 1$spacing-05
Select control: items per pagepadding-left8 / .5$spacing-03
padding-right16 / 1$spacing-05
Select control: number of pagespadding-left16 / 1$spacing-05
padding-right8 / .5$spacing-03
Chevron iconsvg16 x 16px
Caret iconsvg16 x 16px
Structure and spacing measurements for pagination | px / rem

Structure and spacing measurements for pagination | px / rem

Pagination nav structure

The pagination nav variant is placed near the information it is paginated to, and its width is determined by the number of pages available.

ElementPropertypx / remSpacing token
Border: selectedborder4px
Caret iconsvg16 x 16px
Structure and spacing measurements for pagination nav | px / rem

Structure and spacing measurements for pagination nav | px / rem

Size

The pagination component is available in three sizes for both variants: large, medium, and small.

ElementSizeHeight (px / rem)
Container heightLarge (lg)48 / 3
Medium (md)40 / 2.5
Small (sm)32 / 2
Icon buttonLarge (lg)48 / 3
Medium (md)40 / 2.5
Small (sm)32 / 2

Pagination size

Large, medium, and small sizes of pagination

Large, medium, and small sizes of pagination

Pagination nav size

Large, medium, and small sizes of pagination nav

Large, medium, and small sizes of pagination nav

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments onGitHub.