Skip to main content


.bx--btn--primarytext color$inverse-01#ffffff
background-color, border$brand-01#3d70b2
.bx--btn--primary:disabledopacity$brand-01#3d70b2 at 50% opacity
.bx--btn--secondarytext color$brand-01#3d70b2
.bx--btn--secondary:hovertext color$inverse-01#ffffff
.bx--btn--tertiarytext color$inverse-01#ffffff

Primary, secondary, and ghost button state examples


Button text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

ClassFont-size (px/rem)Font-weightType style
.bx--btn14 / 0.875Semi-Bold / 600.bx--type-zeta


A button cannot have any element or text within 16 pixels / 1 rem of its borders. For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside. For a button with a glyph, the space between the button label and the glyph must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with glyphs appear together.

ClassPropertypx / remSpacing token
.bx--btn--primaryheight40 / 2.5$spacing-2xl
.bx--btn--smheight32 / 2$spacing-xl
.bx--btnpadding-left, padding-right16 / 1$spacing-md
.bx--btn--smpadding-left, padding-right16 / 1$spacing-md
.bx--btn .bx--btn__iconmargin-left, margin-right8 / 0.5$spacing-xs
.bx--btn--ghost .bx--btn__iconmargin-left, margin-right8 / 0.5$spacing-xs

Structure measurements for small and regular primary button | px / rem

Spacing measurements for various button types | px / rem

The following specs are not built into any of the button components but are recommended by design as the proper distance between buttons.

AttributePropertypx / remSpacing token
External: buttonmargin10 / 0.625-
Button pairingsmargin-left, margin-right8 / 0.5$spacing-xs