Skip to main contentCarbon Design System



ElementPropertyColor token
Containerbackground-color$layer *
border-top$border-subtle *
Text: items per pagetext color$text-primary
Text: number of itemstext color$text-secondary

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


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


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
padding-left, padding-right16 / 1$spacing-05
Select controlpadding-left, padding-right16 / 1$spacing-05
Arrow iconsize20 x 20px
Spacing measurements for pagination

Spacing measurements for pagination | px / rem

Structure measurements for pagination

Structure measurements for pagination | px / rem


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