Skip to main contentCarbon Design System

Pagination

Color

ElementPropertyColor token
Containerbackground-color$layer *
border-top$border-subtle *
Texttext color$text-secondary
Iconfill$icon-primary

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

Typography

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

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

Structure

The Pagination bar is most commonly used in data tables. The width can vary depending on content and layout, but should span the entire width of the table it’s being paired with.

ElementPropertypx / remSpacing token
Containerborder1px–
padding-left, padding-right16 / 1$spacing-05
Select controlpadding-left, padding-right16 / 1$spacing-05
Arrow iconsize20 x 20px–
Structure and spacing for pagination

Structure and spacing measurements for Pagination | px / rem

Sizes

ElementSizeHeight (px/rem)
Container heightSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Icon buttonSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3