Skip to main contentCarbon Design System



ClassPropertyColor token
.bx--pagination__texttext color$text-02


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

ClassFont-size (px/rem)Font-weightType token
.bx--pagination__text12 / 0.75Regular / 400$caption-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.

ClassPropertypx / remSpacing token
.bx--paginationheight48 / 3
.bx--paginationpadding-left, padding-right16 / 1$spacing-05
.bx--pagination .bx--select-inputpadding-left, padding-right16 / 1$spacing-05
.bx--pagination__buttonheight, width16 / 1
arrowicon size20 x 20px
Structure and spacing for pagination

Structure and spacing measurements for Pagination | px / rem