Skip to main content

Color

ClassPropertySCSSHEX
.bx--paginationbackground-color$ui-01#ffffff
.bx--paginationborder$ui-04#8897a2
.bx--pagination__textcolor$text-02#5a6872
.bx--pagination__button-iconfill$ui-05#5a6872

Typography

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

ClassFont-size (px/rem)Font-weightText styles
.bx--pagination__text12 / 0.75Normal / 400.bx--type-caption

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. The size of the chevron is 8px by 12px.

ClassPropertypx / remSpacing token
.bx--paginationheight40 / 2.5-
.bx--paginationborder1px-
.bx--paginationpadding-left, padding-right16 / 1$spacing-md
.bx--paginationpadding-top, padding-bottom8 / 0.5$spacing-xs
.bx--pagination--inlineheight40 / 2.5-
.bx--pagination--inline .bx--pagination__button--backwardmargin-left, margin-right16 / 1$spacing-md
.bx--pagination--inline .bx--pagination__button--backwardpadding-left, padding-right16 / 1$spacing-md
.bx--pagination .bx--select-inputpadding-right20 / 1.25-

Structure and spacing for pagination Structure and spacing measurements for Pagination | px / rem